$(document).ready or $(window).load for jQuery cycle

1
votes

I am using Jquery Cycle to scroll images, i am currently using $(document).ready, the problem is the images are half loaded and the cycle effect starts,

$(document).ready(function(){
$('#gallery').cycle({
        fx: 'scrollLeft,scrollLeft,scrollLeft,scrollLeft' ,
        speed:  1000,
        pause:   3
         });
 });

Should i use $(window).load which waits for all images to load before starting the effects, The problem with this is images will be stacked on top of the other.

So Kindly suggest a solution to my problem

3
jqueryjquery-cycle
for the div with ID gallery make style display: none . If this does not solves problem then add in js code $("#gallery").show();. Try it before and after cycle code and see the results. You should not use $(window).load for cycle. - Imdad
stackoverflow.com/questions/1430854/… - Rishabh

3 Answers

0
votes
#gallery { width: SOMEDEFAULTWIDTH; height: SOMEDEFAULTHEIGHT; } 
#gallery img { display:none; }

To avoid images to be stacked on top of the other hide the images by display: none jquery cycle plugin will show them when it starts.

0
votes

you can use this library to help you load all your images and then load them when you need to

http://thinkpixellab.com/pxloader/

0
votes

You also use jQuery(window).load() event that is fired after whole content is loaded.

Use like this.

jQuery(window).load(function($) {

 $('#gallery').cycle({
    fx: 'scrollLeft,scrollLeft,scrollLeft,scrollLeft' ,
    speed:  1000,
    pause:   3
     });

});

Hope it helps to you.