?
Solved

Jquery Image Rotation is SLOW!!!!!

Posted on 2011-02-10
9
Medium Priority
?
998 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
  • 2
  • +2
9 Comments
 
LVL 23

Accepted Solution

by:
jeremyjared74 earned 2000 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
More Than Just A Video Library

Train for your certification. Learn the latest DevOps tools. Grow your skillset to do better work.

At Linux Academy, we release new training modules every week so you'll always be up to date on the latest tech.

 
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

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!

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The purpose of this video is to demonstrate how to Test the speed of a WordPress Website. Site Speed is an important metric of a site’s health. Slow site speed can result in viewers leaving your site quickly and not seeing your content. This…
The viewer will learn how to dynamically set the form action using jQuery.
Suggested Courses

762 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