jquery - $(document).ready 或 $(window).load 用于 jQuery 循环

Question

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

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

我应该使用 $(window).load 在开始效果之前等待所有图像加载，问题是图像将堆叠在另一个之上。

所以请建议我的问题的解决方案

Answer 1

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

http://thinkpixellab.com/pxloader/

Answer 2

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

像这样使用。

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

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

});

希望对您有所帮助。

Answer 3

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

为避免图像堆叠在其他图像之上，display: nonejquery 循环插件将在启动时显示它们。