Clever Geek Handbook

When does AJAX success fire?

I want to load some AJAX HTML document, but I want to display it when all images in that document are encoded.

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

".back" should be visible when all images in Tour.html are loaded, when the success event fires

+3


source to share


3 answers 


$(".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'); });
});


The returned html requires at least one <img>

.

+5


source


I would suggest using an iframe. Here's 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";
+1


source


ImagesLoaded is what you are looking for.

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

Plugin indicates why you cannot use load()

on cached images

0


source






More articles:


All Articles