javascript - ajax 请求后再次收听`$(window).load`

Question

我正在加载另一个 HTML 页面的 AJAX 请求，然后将其插入到当前页面的 DOM 元素中。

我通过 AJAX 获得的页面包括link对样式表的引用，以及必须从服务器加载的多个图像。

我想在加载来自 AJAX 调用的所有资源（包括引用的样式表和图像）之后执行代码。
请注意，这些样式表和图像不是直接从 AJAX 加载的，而是作为从 AJAX 调用插入 HTML 的结果加载的。

因此，我不是在寻找success:回调，而是$(window).load(function () { ... });在 AJAX 调用之后寻找另一个回调（我尝试再次收听$(window).load但没有成功。

如果您需要更多代码，请告诉我。

Answer 1

检查样式表是否已经加载是很困难的——尤其是跨浏览器。 本文建议在加载的样式表中有一个将被已知规则更改的元素并轮询以检查其样式是否已更改以检测加载。

图像更容易，我希望它们需要更长的时间来加载，所以你可能只检查图像加载就可以了。

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