Question

I’m using jquery.load to pull in a fragment of html from another page. The fragment contains quite a large background image. Once the load function has finished and it calls it’s callback I set the fragment to display block in the page – problem is that as the html loads I see the new content without the background image….the background image loads later.

Whats a good method of making sure the image is loaded before I show the ajax content?

Answer 1

You could do this…

$('button').click(function() {
    $('#element').load('/echo/html/', function(responseText) {

        // For testing
        responseText = '<link href="http://sstatic.net/stackoverflow/all.css?v=ded66dc6482e" rel="stylesheet" type="text/css" /><div class="ac_loading" style="width: 200px; height: 200px;">ABC</div>';


        var element = $(this),
            responseTemp = $('<div />').hide().html(responseText).appendTo('body'),
            styles = responseTemp.find('link[type="text/css"]'),
            stylesHook = $('head link[type="text/css"]:last');

        if (stylesHook.length === 0) {
            stylesHook = $('head *:last-child');
        }

        styles.insertAfter(stylesHook);

        preloadSrc = responseTemp.find('div').css('backgroundImage').replace(/^url\(["']?(.*?)["']?\)$/, '$1'), image = new Image();

        image.onload = function() {
            styles.add(responseTemp).remove();
            element.html(responseText);
        }

        image.src = preloadSrc;
    });
});

jsFiddle.