Modernizr加载方法

我有使用Modernizr加载的问题。 我正在使用Modernizr,jQuery和Nivo滑块。 有时当我刷新我的主页时,我的滑块显示不正确,有时候一切都很棒。

我的方法是正确的吗?

HTML:

   

在master.js中:

 Modernizr.load([ { load: 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', complete: function () { if ( !window.jQuery ) { Modernizr.load('js/plugins/jquery-1.7.1.js'); } init(); } }, { load: 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js', complete: function () { if ( !window.jQuery ) { Modernizr.load('js/plugins/jquery-ui-1.8.16.js'); } } } ]); // START ****** function init() { $(document).ready(function(){ // Home > Slider ---------------------------------------------- if($('#slider').length){ Modernizr.load([ { both: [ 'js/plugins/jquery-nivoslider.js', 'css/nivo-slider.css' ], complete: function(){ $('#slider').nivoSlider({ effect: 'fade', // Specify sets like: 'fold,fade,sliceDown' animSpeed: 1000, // Slide transition speed pauseTime: 5000, // How long each slide will show startSlide: 0, // Set starting Slide (0 index) directionNav: true, // Next & Prev navigation directionNavHide: false, // Only show on hover controlNav: true, // 1,2,3... navigation controlNavThumbs: false, // Use thumbnails for Control Nav controlNavThumbsFromRel: false, // Use image rel for thumbs controlNavThumbsSearch: '.jpg', // Replace this with... controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src keyboardNav: true, // Use left & right arrows pauseOnHover: true, // Stop animation while hovering manualAdvance: false, // Force manual transitions captionOpacity: 1, // Universal caption opacity prevText: '', // Prev directionNav text nextText: '', // Next directionNav text randomStart: false, // Start on a random slide beforeChange: function(){}, // Triggers before a slide transition afterChange: function(){}, // Triggers after a slide transition slideshowEnd: function(){}, // Triggers after all slides have been shown lastSlide: function(){}, // Triggers when last slide is shown afterLoad: function(){} // Triggers when slider has loaded }); } } ]); } }); } // END ****** 

看起来你有时间问题; 在加载jQueryUI之前调用init() ,但这是一个简单的修复:

 Modernizr.load({ load: [ 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js' ], complete: function () { if ( !window.jQuery ) { Modernizr.load( load: [ 'js/plugins/jquery-1.7.1.js', 'js/plugins/jquery-ui-1.8.16.js' ], complete : function(){ init(); }); } else { init(); } } }); 

我没有测试过这段代码,但基本上你需要等到jQuery和jQueryUI都加载才能调用init();