Solved

Jquery Image Rotation is SLOW!!!!!

Posted on 2011-02-10
9
977 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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
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
 

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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
The purpose of this video is to demonstrate how to Import and export files in WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Click on Too…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

777 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