Question

I am using this script…

It load content from a specifc #id in a URL to current page, and animate it… sliding from side of the page…when user click on a link

Everything works except images taking time to load… I tried and struggling to incorporate image preloader to this? So all the content loads together

function goTo(href) {

    var left = $(window).width();
    $('#id').css("left", left);

    $.ajax({
        url: href,
        success: function (data) {

            var content = $(data).find('#id').html();

            // Windows Load Function
            $(window).load(function () {

                $("#id").html(content).animate({
                    left: '0',
                }, 'fast');

                var title = $('#id').find('h1').text();
                $('head').find('title').text(title);

            });
        }
    });
}

// check for support before we move ahead

if (typeof history.pushState !== "undefined") {
    var historyCount = 0;

    // On click of link Load content and animate
    $('.access a').live('click', function () {

        var href = $(this).attr('href');

        goTo(href);

        history.pushState(null, null, href);
        return false;
    });

    window.onpopstate = function () {
        if (historyCount) {
            goTo(document.location);
        }
        historyCount = historyCount + 1;
    };
}

Answer 1

The window load event only happens once. What you will want to do is parse the content into an html fragment, loop through and preload the images, and then append the content.

// this contains the content we want to append
var $content = $(data).find('#id').children();
// these are the images that are in content that we need to preload
var $images = $content.find("img").add($content.filter("img"));
// keep track of successfully preloaded images
var counter = 0;
// deferred object that will resolve when all images are preloaded
var $def = $.Deferred();
$images.each(function(){
    // if image is already loaded, increment counter and move on.
    if (this.complete || this.readystate === 4) {
        counter++;
        // if all images are preloaded, resolve deferred object
        if (counter === $images.length) $def.resolve();
    }
    else {
        // since the image isn't already preloaded, bind the load event.
        $(this).load(function(){
            counter++;
            // if all images are preloaded, resolve deferred object
            if (counter === $images.length) $def.resolve();
        });
    }
});
// when done preloading, this function will happen.
$def.done(function(){
    // empty target element and append content to it, then animate it.
    $("#id").empty().append($content)
        .animate({
            left: '0'
        }, 'fast');

    var title = $('#id').find('h1').text();
    $('head').find('title').text(title);
});