javascript - 将多个函数添加到 jquery $(window).load 函数声明的正确方法是什么？

Question

我正在使用以下 javascript 使用 jquery 中的 nivo slider 对象为两个幻灯片制作动画:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>  
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>  
<script type="text/javascript">  
$(window).load(function() {  
    $('#sliderone').nivoSlider({  
        effect:'fade',  
        slices:15,  
        animSpeed:500,  
        pauseTime:7000,  
        startSlide:0, //Set starting Slide (0 index)  
        directionNav:false, //Next & Prev  
        directionNavHide:true, //Only show on hover  
        controlNav:false, //1,2,3...  
        controlNavThumbs:false, //Use thumbnails for Control Nav  
        controlNavThumbsSearch: '.jpg', //Replace this with...  
        controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src  
        keyboardNav:false, //Use left & right arrows  
        pauseOnHover:true, //Stop animation while hovering  
        manualAdvance:false, //Force manual transitions  
        captionOpacity:0.8, //Universal caption opacity  
        beforeChange: function(){},  
        afterChange: function(){},  
        slideshowEnd: function(){} //Triggers after all slides have been shown  
    });  
});  
$(window).load(function() {  
    $('#slidertwo').nivoSlider({  
        effect:'fade',  
        slices:15,  
        animSpeed:500,  
        pauseTime:7000,  
        startSlide:0, //Set starting Slide (0 index)  
        directionNav:false, //Next & Prev  
        directionNavHide:true, //Only show on hover  
        controlNav:false, //1,2,3...  
        controlNavThumbs:false, //Use thumbnails for Control Nav  
        controlNavThumbsSearch: '.jpg', //Replace this with...  
        controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src  
        keyboardNav:false, //Use left & right arrows  
        pauseOnHover:true, //Stop animation while hovering  
        manualAdvance:false, //Force manual transitions  
        captionOpacity:0.8, //Universal caption opacity  
        beforeChange: function(){},  
        afterChange: function(){},  
        slideshowEnd: function(){} //Triggers after all slides have been shown  
    });  
});  
</script>    

此代码在 Internet Explorer 中有效，但在 Chrome/Firefox 中无效。我怀疑这是因为我使用了 $(window).load(function() 两次/不正确。

任何有关如何正确完成此操作的建议将不胜感激。

Answer 1

由于两个回调的代码几乎相同，我将其重构为:

$(window).load(function() {  
    $('#sliderone, #slidertwo').nivoSlider({  
        effect:'fade',  
        slices:15,  
        animSpeed:500,  
        pauseTime:7000,  
        startSlide:0, //Set starting Slide (0 index)  
        directionNav:false, //Next & Prev  
        directionNavHide:true, //Only show on hover  
        controlNav:false, //1,2,3...  
        controlNavThumbs:false, //Use thumbnails for Control Nav  
        controlNavThumbsSearch: '.jpg', //Replace this with...  
        controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src  
        keyboardNav:false, //Use left & right arrows  
        pauseOnHover:true, //Stop animation while hovering  
        manualAdvance:false, //Force manual transitions  
        captionOpacity:0.8, //Universal caption opacity  
        beforeChange: function(){},  
        afterChange: function(){},  
        slideshowEnd: function(){} //Triggers after all slides have been shown  
    });  
});

也可以考虑改用文档就绪事件:$(document).ready(function(){...}) 或短$(function(){... }).

Starx 提到使用类而不是 ID，这也是一个很好的建议!

---

假设两个 slider 的外观和工作方式应该完全相同，此代码可以更轻松地对它们进行更改，因为您只需一次 进行更改(提高可维护性和可读性)。