Listen again to `$(window).load` after ajax request

ajax, html, javascript

Solution

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

Images are easier, and I would expect they take a lot longer to load so you can probably get away with only checking image loading.

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
    });
}

Problem

I'm loading an AJAX request of another HTML page, which is then inserted into a DOM element of the current page. The page I'm getting through AJAX includes `link` references to stylesheets, as well as multiple images, which must be loaded from the server. I want to execute code after all resources from the AJAX call loads, including referenced stylesheets and images. Note that these stylesheets and images are not directly loaded from AJAX but are loaded as a result of the insertion of the HTML from the AJAX call. Thus, I'm not looking for the `success:` callback, but rather like another `$(window).load(function () { ... });` after the AJAX call (I've tried listening again to `$(window).load` without success. Let me know if you need more code.

Original source