Question

I want load some HTML document by AJAX, but I want to show it when all images in this document are loded.

$('.about').click(function () {
    $(".back").load('Tour.html', function () {
        $(".back").show();
    });
});

“.back” should be visible when all images in Tour.html are loaded, when is triggered a success event??

Answer 1

$(".back").load('Tour.html', function (html) {
    var $imgs = $(html).find('img');
    var len = $imgs.length, loaded = 0;
    $imgs.one('load', function() {
        loaded++;
        if (loaded == len) {
            $(".back").show();
        }
    })
    .each(function () { if (this.complete) { $(this).trigger('load'); });
});

This requires at least one <img> in the returned html.