When Is Triggered Ajax Success?

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

Solution 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.

Solution 2:

What I would suggest is to use an iframe instead. Here is some sample code in plain JavaScript:

var ifr=document.createElement("iframe");
ifr.style.display="none";
document.body.appendChild(ifr);
ifr.onload=function() {
    // Do what you want with Tour.html loaded in the iframe
};
ifr.src="Tour.html";

Solution 3:

ImagesLoaded is what you are looking for.

Place all code (ajax request in this case), when the images specified are loaded.

The plugin specifies why you cannot use load() on cached images