Geek asks and answers

Run the `$ (window) .load` command again after the ajax request.

I am loading an AJAX request of another HTML page, which is then inserted into the DOM element of the current page.

The page that I get through AJAX includes linklinks to stylesheets, as well as several images that need to be downloaded from the server.

I want to execute the code after all resources from the AJAX call are loaded , including reference stylesheets and images.
Please note: these stylesheets and images are not directly loaded from AJAX, but loaded as a result of inserting HTML from an AJAX call.

So I'm not looking for a callback success:, but rather like the other $(window).load(function () { ... });after calling AJAX (I tried listening again $(window).load).

Let me know if you need more code.

+5
source share
1 answer

Checking if a stylesheet is loaded is difficult, especially a cross browser. This article suggests having an element that will be changed by a well-known rule in the loaded stylesheet and poll to check if its style has been changed to detect loading.

Images are simpler, and I expect them to load much longer, so you might avoid checking for image uploads.

success: function (html) {
    var imageloads = [];
    $(html).find("img").each(function () {
        var dfd = $.Deferred();
        $(this).on('load', function () {
            dfd.resolve();
        });
        //Image was cached?
        if (this.complete) {
            $(this).trigger('load');
        }
        imageloads.push(dfd);
    });
    $.when.apply(undefined, imageloads).done(function () {
        //images finished loading
    });
}
+5
source

More articles:


All Articles