jquery - 在加载所有图像之前启动 Nivo-slider

Question

我正在使用 Nivo-slider Wordpress 插件，并且喜欢它的外观以及我的客户使用它的易用性。

唯一的问题是幻灯片在加载所有图像之前不会播放，一旦你有多个图像，这是一个大问题：http: //www.marcusmcshane.com/

有谁知道如何在第一对加载后开始幻灯片放映？

提前感谢您提供的任何帮助。

Answer 1

我个人对 Nivo Slider 有丰富的经验，我记得他们使用$(window).load过，我确实看到你还在使用。

改变这个：

<script type="text/javascript"> 
jQuery(window).load(function(){
    jQuery("#nivoslider-283").nivoSlider({
        effect:"fade",
        slices:15,
        boxCols:8,
        boxRows:4,
        animSpeed:500,
        pauseTime:3000,
        startSlide:0,
        directionNav:false,
        directionNavHide:true,
        controlNav:false,
        keyboardNav:true,
        pauseOnHover:true,
        manualAdvance:false
    });
});
</script>

对此：

<script type="text/javascript"> 
jQuery(function(){
    jQuery("#nivoslider-283").nivoSlider({
        effect:"fade",
        slices:15,
        boxCols:8,
        boxRows:4,
        animSpeed:500,
        pauseTime:3000,
        startSlide:0,
        directionNav:false,
        directionNavHide:true,
        controlNav:false,
        keyboardNav:true,
        pauseOnHover:true,
        manualAdvance:false
    });
});
</script> 

Answer 2

这仍然与每个新的 Nivo Slider 全新安装有关，并且 Caroline 的解决方案运行良好。

我保留了一个经过调整的副本以供设计使用，其中包含任何调整（如上述），因此无需不断更改它。

保存：

    jQuery(function(){
$('#slider').nivoSlider();   });

..作为一个单独的文件 (nivo.js) 并从 html 文件中调用它意味着如果需要可以很容易地找到它来调整或返回原始文件。

为了更加安心，请定义 div (#slider) 的高度，以便页面不会在加载缓慢的浏览器中弹出。