Modernizr load method

Question

I've problems with Modernizr load. I'm using Modernizr, jQuery and Nivo-slider. Sometimes when i refresh my homepage my slider don't appear correctly, sometimes everything is great.

Is my method is the right thing to do ?

HTML :

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

In 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

It looks like you have a timing issue; init() is being called before jQueryUI is loaded, but it's a simple fix:

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

I haven't tested this code, but basically you need to wait until both jQuery and jQueryUI are loaded before you can call init();