CODEWITHSUNDEEP
javascriptjqueryajax
Taron Mehrabyan
Taron Mehrabyan

Reputation: 2229

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 () {
        $(".back").show();
    });
});

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

Upvotes: 3

Views: 92

Answers (3)

Christophe
Christophe

Reputation: 28174

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";

Upvotes: 1

Explosion Pills
Explosion Pills

Reputation: 191819

$(".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.

Upvotes: 5

Arindam
Arindam

Reputation: 998

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

Upvotes: 0

Related Questions