Link to home
Create AccountLog in
Avatar of SiriusPhil
SiriusPhil

asked on

Jquery Image Rotation is SLOW!!!!!

I had a theme created for a website.  Initially, the developers had had used a direct PHP image rotation using JQuery.  We noticed that the images seemed to "flash" before the pages load.  What it actually happening is that the page is displaying  images in a list <li>  before the page applies the CSS.  So they decided to use a plugin called WP-Cycle.  The problem still exists.  Certain pages are worse than others, so the "flashing" is inconsistent throughout the site.

The "flashing" issue appears to be worse in certain browser than others.

I can't seem to figure out the cause, so I am offering 500 points to the person who can help me solve this (or come up with an alternate solution.

Here is the base URL.  Try clicking on the news page to see the flashing:

http://stage.decarorestaurantgroup.com

Thanks.

Phil
ASKER CERTIFIED SOLUTION
Avatar of jeremyjared74
jeremyjared74
Flag of United States of America image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
hard code style="display: none;" into the ul tag. Then use jquery's document ready function to make it visible when the page has completed loading.

something like

<ul style="display: none;" id="picturesList">
... (your pictures are listed here)
</ul>


<script type="text/javascript">
$(document).ready(function ()
      {
           $('#picturesList').show();
         });
</script>
Avatar of hexer4u
I agree with jrm213jrm213, with 2 observations:
1. instead of doing
$('#picturesList').show();

Open in new window

, you should do
$('#picturesList').css('display','inherit');

Open in new window

.show() will sometimes mess up the layout.
2. inside the ready() function you should check when the first image is loaded and then show them, otherwise the flicker will appear as long as the images are loaded. Check jQuery .load() function

Other than that, for me the flash was quite brief (firefox), barely noticeable.
also, are your images optimized for the web? Are you using really big images too much dpi (150,300) when you could be using 72dpi images instead? If they images are really big you will have to wait for them to download to the machine. Also, jquery being a javascript library will function better on better computers since javascript runs on the client machine. Older computer's do not always do javascript real well.
Avatar of SiriusPhil
SiriusPhil

ASKER

jrm213jrm213...

The images are very tiny.  I can't get that JavaScript you provided to display the hidden images.

I now reproduced this on both Linux and Windows machines.  Some browsers worse than others.  What is interesting is that if I take the rendered page and post it as a strict HTML page, the flashing does not happen.

jeremyjared74...

Could get the suggested CSS to affect it.
Could get the suggested CSS to affect it.

The CSS that may fix it is in my previous post.

Add this:
#slider {
        position:relative;
}
#slider img {
        position:absolute;
        top:0px;
        left:0px;
}

Open in new window

Your jquery file http://www.decarorestaurantgroup.com/wp-content/themes/Decaro/js/script.js have a function  which contain time for slide show

var $dec = jQuery.noConflict();
$dec(document).ready(function() {
$dec(".col").equalHeights();
 $dec('#bannerright').cycle({
fx: 'fade',
 timeout: 6000,
 delay: -5000
 });
}); 

Open in new window

Try changing timeout and delay
jeremyjared74-

You were correct...  I must have used a capital or something, because I know see it works!  Absolutely awesome.  Thank you.

Phil
You are welcome.