Modernizr加載方法

Question

我有Modernizr加載問題。我正在使用Modernizr，jQuery和Nivo-slider。 有時當我刷新我的主頁時，我的滑塊顯示不正確，有時候一切都很好。

我的方法是正確的嗎？

HTML：

<!-- SCRIPTS --> 
<script type="text/javascript" src="js/plugins/modernizr-2.0.6.js"></script> 
<script type="text/javascript" src="js/master.js"></script> 

在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 ****** 

Answer 1

它看起來像你有一個時機的問題; init()被jQueryUI的調用之前被加載，但它是一個簡單的解決辦法：

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的加載後，才能調用初始化（）;