在加载 iframe 后删除加载器动画

Removing loader animation after iframes have loaded

本文关键字：加载 动画 删除 iframe      更新时间：2023-09-26

我正在维护一个Web应用程序，该应用程序的所有内容都在iframe中。快速分解其结构：（每个"-"代表一个新层）

Main page
-iframe container
--iframe q1
--iframe q2
--iframe q3
--iframe q4
--iframe q5

基本上，一个主框架内部有 4 个 iFrame。我有一个加载器动画，我需要在所有 iframe 完成加载后从屏幕中删除它。每个 iframe 都有通过页面上所做的选择更新的数据。我需要的是每次更新后加载动画覆盖整个屏幕。处理此问题的最佳方法是什么？我知道你可以使用 

$('#iframe').on('load',function() {
      //code here...
}

以确定 iframe 何时完成加载。有没有办法一次收听所有这些，然后在完成后关闭加载动画？谢谢你的帮助。

以下是每个 iframe 的创建方式： 

var p1HTML = '<div id='p1ContainerBody' class='panelContainerBody'><iframe id='P1ChartFrame' src='' frameborder='0' scrolling='no' style='height: 100%; width: 100%'></iframe></div>'

然后：

if (ConfigData["GlobalOptions"].Quadrants[x].QuadrantId == "1") { $("#q1Container").html(p1HTML); }

为每个iframe创建一个Promise，并添加一个load侦听器，如第二个代码块中所述。 在加载iframe后，在加载事件侦听器中解析 Promise。 创建一个Promise.all()处理程序，以便在所有iframes加载后删除动画。

Promise.all(Array.prototype.map.call(document.querySelectorAll("iframe"), function (iframe) {
    return new Promise(function (resolve, reject) {
        iframe.addEventListener("load", function () {
            resolve();
        });
    });
})).then(function () {
    // Do loading removal
});

jQuery有自己的Promise API，如果你更愿意留在jQuery框架内。

为了促进这一点，您需要做的主要事情是保留iframes的句柄，以便在更改它们指向的 url 之前可以将显式加载处理程序附加到它们。 如果不这样做，则在缓存位置或其他情况下可能会错过加载事件。

考虑以下替代代码：

var urlArr, iframeProms;
// Array of urls that we need to make iframes for
urlArr = [
    "http://www.google.com",
    "http://www.yahoo.com"
];
// Map the urls to an array of objects containing iframe elements and associated promises
iframeProms = $.map(urlArr, function (url) {
    var d, iframe;
    // Make a deferred that we will resolve on iframe load
    d = $.Deferred();
    // Make an iframe
    iframe = $("iframe");
    // Add a load listener BEFORE YOU ADD THE URL
    iframe.on("load", function () {
        // Resolve the deferred
        d.resolve();
    });
    // Now provide the url so we don't miss timing for load event
    iframe.src = url;
    // Return a handle to the iframe and the deferred's promise
    return {
        i: iframe,
        p: d.promise
    };
});
// Map down to the promises and what for them to resolve
$.when($.map(iframeProms, function (i) {
    return i.p;
})).then(function () {
    // Do loading removal
});
相关文章：