jquery - 现代加载方法

Question

我在使用 Modernizr 负载时遇到问题。我正在使用 Modernizr、jQuery 和 Nivo-slider。 有时，当我刷新主页时，我的 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 都加载完毕之后才能调用 init();