Solved

Jquery Image Rotation is SLOW!!!!!

Posted on 2011-02-10
9
970 Views
Last Modified: 2012-06-27
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
Comment
Question by:SiriusPhil
  • 3
  • 2
  • 2
  • +2
9 Comments
 
LVL 23

Accepted Solution

by:
jeremyjared74 earned 500 total points
ID: 34864928
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
 
LVL 17

Expert Comment

by:jrm213jrm213
ID: 34865898
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
 
LVL 6

Expert Comment

by:hexer4u
ID: 34866289
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
 
LVL 17

Expert Comment

by:jrm213jrm213
ID: 34872148
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
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 

Author Comment

by:SiriusPhil
ID: 34930670
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
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 34930757
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
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
ID: 34941798
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
 

Author Closing Comment

by:SiriusPhil
ID: 34954176
jeremyjared74-

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

Phil
0
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 34954254
You are welcome.
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Suggested Solutions

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
I annotated my article on ransomware somewhat extensively, but I keep adding new references and wanted to put a link to the reference library.  Despite all the reference tools I have on hand, it was not easy to find a way to do this easily. I finall…
The purpose of this video is to demonstrate how to reset a WordPress password if you are locked out and cannot reset the password. A typical use would be if you cannot access the email to which WordPress would send the password recovery email to…
The purpose of this video is to demonstrate how to update a WordPress Site’s version. WordPress releases new versions of its software frequently and it is important to update frequently in order to keep your site secure, and to get new WordPress…

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now