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