Javascript 如何遍历元素集并在转到下一个元素之前检查每个元素是否已加载？

我想我需要一些帮助。我有下面的代码来检查我页面上的iframe（包含googledocviewer文档）是否已加载，如果未加载，则重新加载，直到它最终被加载为止

function reloadIFrame() {
    // force iframe to reload   
    document.getElementsByClassName("preview-frame").src=document.getElementsByClassName("preview-frame").src;
}

timerId = setInterval("reloadIFrame();", 2000);

jQuery( document ).ready(function() {
    jQuery('.preview-frame').on('load', function() {
        clearInterval(timerId);
        console.log("Finally Loaded");
    });
}); 

如果有人对此感兴趣，原因是：这确实是必要的，因为谷歌文档查看器往往不会偶尔完全加载内容（然后中断过程），因此您只有80%的机会显示内容，而不是显示空白

上面的代码工作得很好，但现在我的页面上有几个iframe

我想要实现的是一种循环，对于每个元素，开始一个新的间隔，直到加载其内容，然后转到下一个间隔，直到可靠地加载所有iframe并真正显示内容

---

有人伸出援助之手如何做到这一点？非常感谢

您可以创建一个新函数，并将需要加载的元素作为参数。在加载元素后也调用回调：

function loadIframe(iframeElement, callback) {
    function reloadIFrame() {
        // force iframe to reload   
        iframeElement.src = iframeElement.src;
    }

    timerId = setInterval("reloadIFrame();", 2000);

    jQuery( document ).ready(function() {
        jQuery(iframeElement).on('load', function() {
           clearInterval(timerId);
           callback(iframeElement);
        });
    });
}

// Here you can call the function
var iframes = document.getElementsByClassName("preview-frame");

for (var i = 0, len = iframes.length; i < len; i++) {
    loadIframe(iframes[i], function(element){
        console.log(element, 'finally loaded');
    });
}

函数loadIframe（iframeElement，回调）{
函数重载框架（）{
//强制iframe重新加载
iframelement.src=iframelement.src；
}
timerId=setInterval（“reloadIFrame（）；”，2000）；
jQuery（文档）.ready（函数（）{
jQuery（iframelement）.on（'load'，function（））{
清除间隔（timerId）；
回调（iframelement）；
});
});
}
//在这里您可以调用函数
var iframes=document.getElementsByClassName（“预览帧”）；
for（变量i=0，len=iframes.length；i

嗨，首先谢谢大家！看起来真的很酷，在我看来很合乎逻辑。但可悲的是，它抛出了一片错误海洋，可能是由于iframe的性质（交叉起源？我不知道），其中还有“ReferenceError:找不到variable:reloadIFrame”，我实际上不理解它。@Garavani您可以尝试将“reloadIFrame”函数直接放在“setInterval”的回调中（作为匿名函数）。这将修复引用错误。