Question

I am trying load content from another url using pushstate/html5… The content I am trying to load has a big background image which takes time to load…

So when it animates fast full image seems to come up and slide in but then image reloads again…

I tried using

image preloader/
$(document).ready()

they all break the script and can’t quite seem to figure out how to incoprate it here

    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

MonteCristo,

I think this is best addressed with Deferreds.

In the code below, a Deferred object is passed to goTo() as a second argument, animator. This Deferred is resolved inside goTo() when all images with class imgSelector have sussessully loaded. On resolution of animator the animation fires and the page’s title is changed.

Creating animator externally and passing it to goTo() allows this Deferred to be rejected from the scope where goTo() is called. This feature is included to inhibit the animation should another click or popstate event occur before the animation fires.

To make this work, you will need to serve each content page with a dummy off-screen foreground <img> with the same src as the problematic large background image and class="critical". This is the easiest way to trigger an event when the background image loads.

$(function() {
    var $id = $("#id");
    var imgClass = 'critical';
    function goTo(href, animator) {
        $id.stop().css("left", $(window).width());
        $.ajax({
            url: href,
            success: function(data) {
                var deferreds = [];
                $id.html($(data).find('#id').html());
                $("img." + imgClass, $id).each(function() {
                    var d = new $.Deferred();
                    deferreds.push(d);
                    $(this).on('load error', function(){
                        d.resolve();
                    });
                });
                $.when.apply(null, deferreds).done(function() {
                    animator.resolve();
                });
                $.when(animator).done(function() {
                    $id.animate({
                        left: '0',
                    }, 'fast');
                    $('head title').text($('h1', $id).text());
                });
            }
        });
    }

    var historyCount = 0,
        animator = null;

    function getDeferred() {
        if(animator) {
            animator.reject();
        }
        animator = new $.Deferred();
        return animator;
    };

    if (typeof history.pushState !== "undefined") {
        $('.access a').live('click', function() {
            var href = $(this).attr('href');
            goTo(href, getDeferred());
            history.pushState(null, null, href);
            return false;
        });
        window.onpopstate = function() {
            if(historyCount) {
                goTo(document.location, getDeferred());
            }
            historyCount++;
        };
    }
});

untested

You may well need to debug and/or modify the code to get exactly what you want.