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

Question

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

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, Jun 13 '12 at 06:07
http://stackoverflow.com/questions/1430854/jquery-wait-for-page-to-finish-loading-before-starting-the-slideshow — Rishabh, Jun 13 '12 at 06:14

Rishabh · Answer 1 · 2012-06-13T06:10:11.587

0

#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.

edited Jun 13 '12 at 06:10

answered Jun 13 '12 at 06:05

Rishabh

1,185
1
12
28

score 0 · Answer 2 · answered Jun 13 '12 at 06:13

0

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

http://thinkpixellab.com/pxloader/

answered Jun 13 '12 at 06:13

Isaac Gonzalez

91
2
9

score 0 · Answer 3 · answered Apr 05 '13 at 05:38

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.

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

3 Answers3