jQuery周期的$(文档).ready或$(窗口).load

Question

我正在使用Jquery循环来滚动图像，我目前使用的是$(document).ready，问题是图像加载了一半，循环效果开始了，

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

如果我使用$(window).load，它在开始特效之前等待所有图像的加载，问题是图像将堆叠在其他图像的顶部。

所以请为我的问题提供一个解决方案

Answer 1

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

为了避免图像堆叠在一起，用display: none隐藏图像，jquery cycle插件会在启动时显示它们。

Answer 2

您可以使用该库来帮助您加载所有图像，然后在需要时加载它们

http://thinkpixellab.com/pxloader/

Answer 3

您还可以使用在加载整个内容之后触发的jQuery(窗口).load()事件。

像这样使用。

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

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

});

希望能对你有所帮助。