Lazy Loading of Nivo Slider

Putting all images and the JavaScript for Nivo Slider into your HTML right from the start blocks the browser from loading more important stuff. Here is an example how you can lazy load all of it. And it degrades gracefully when JS is disabled.

HTML

<link rel="stylesheet" href="http://nivo.dev7studios.com/scripts/nivo-slider/nivo-slider.css">
<link rel="stylesheet" href="http://nivo.dev7studios.com/scripts/nivo-slider/themes/default/default.css">
<div class="slider-wrapper theme-default">
    <div class="ribbon"></div>
    <div id="slider" class="nivoSlider">
        <img src="http://farm7.static.flickr.com/6190/6052323784_d7a892d94e.jpg" alt="Glasbausteine" />
    </div>
</div>

CSS

.nivoSlider {
    position: relative;
    width: 500px;
}
.nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
    display:none;
}
.nivoSlider > img:first-child,
.nivoSlider > a:first-child > img {
    display: block;
}

JavaScript

// ----------------------------------------------------------------------------------------------
// Improved jQuery $.getScript which can cache requests (making subsequent lazy loading quicker)
// Backward compatible!
// ----------------------------------------------------------------------------------------------
$.getScript = function(url, callback, cache){
    $.ajax({
            type: "GET",
            url: url,
            success: callback,
            dataType: "script",
            cache: cache
    });
};

// ----------------------------------------------------------------------------------------------
// Lazy Loading of secondary images & Nivo Slider
// ----------------------------------------------------------------------------------------------
$(window).load(function(){
    $.getScript('http://nivo.dev7studios.com/scripts/nivo-slider/jquery.nivo.slider.pack.js', function(){
        var slider = $('#slider');
        slider.append('<img src="http://farm7.static.flickr.com/6210/6051342991_2261d79189.jpg?nocache=' + (new Date()).getTime() + '" alt="Düsseldorf" />');
        slider.append('<img src="http://farm7.static.flickr.com/6066/6051341305_09f8c7506c.jpg?nocache=' + (new Date()).getTime() + '" alt="Atardecer En Düsseldorf" />');
        slider.append('<img src="http://farm7.static.flickr.com/6192/6050649251_d00a7e7021.jpg?nocache=' + (new Date()).getTime() + '" alt="" />');

        slider.nivoSlider();
    }, true);
});