Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1009
  • Last Modified:

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
0
SiriusPhil
Asked:
SiriusPhil
  • 3
  • 2
  • 2
  • +2
1 Solution
 
jeremyjared74Commented:
This is a common issue with jQuery sliders. The first thing I would try would be to control it using CSS. Try adding this css to your slider. Make sure the ID matches your sliders DIV tag:
#slider {
	position:relative;
}
#slider img {
	position:absolute;
	top:0px;
	left:0px;
}

Open in new window


As for the slow loading, you should try using the W3 Total Cache Plug-in. It is by far the best way to speed up a WordPress website. The set-up process is a little bit of work but it is worth it. Make sure to check out the documentation from within the settings panel. It is well documented, and needs to be followed pretty carefully.
0
 
jrm213jrm213Commented:
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>
0
 
hexer4uCommented:
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.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
jrm213jrm213Commented:
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.
0
 
SiriusPhilAuthor Commented:
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.
0
 
jeremyjared74Commented:
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

0
 
Jagadishwor DulalBraces MediaCommented:
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
0
 
SiriusPhilAuthor Commented:
jeremyjared74-

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

Phil
0
 
jeremyjared74Commented:
You are welcome.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 3
  • 2
  • 2
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now