Как правильно добавить несколько функций в объявление функции jquery $ (window) .load?

Question

Я использую следующий javascript для анимации двух слайд-шоу с использованием объекта слайдера nivo в jquery:

<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 упоминается использование класса вместо идентификаторов, что также является хорошим советом!

---

Предполагая, что оба ползунка должны выглядеть и работать одинаково, этот код упрощает внесение в них изменений, поскольку вы вносите изменения только один раз (повышает удобство сопровождения и читаемость).

Answer 2

Вам нужно только одно объявление window.load, и вы можете поместить в него обе функции.

$(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  
    });   
    $('#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  
    });  
});

Answer 3

Попробуйте использовать класс вместо id.Похоже, все опции одинаковы, поэтому вам не нужно использовать один и тот же код дважды.Попробуйте использовать класс и поставить в очередь несколько функций window.load, не создавайте проблем

Вот так

$(window).load(function() {  
    $('.sliders').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  
    });  
}); 

Теперь задайте оба ваших ползунка класса sliders

Answer 4

Вы можете вызвать обе функции внутри функции загрузки.Возможно, лучше позволить jQuery решать, когда документ загружается, используя приведенный ниже синтаксис.

$(function() {

    $("#Slider1"). ..

    $("#Slider2"). ..

});