如何遍历一组元素并检查每个元素是否加载，然后再转到下一个元素

Question

我想我需要一些帮助。我有以下代码可以检查我的页面上的 iframe(包含谷歌文档查看器文档(是否已加载，如果没有重新加载它，直到它最终被加载。

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

如果有人感兴趣，为什么：这确实是必要的，因为Google Doc Viewer往往不会偶尔完全加载内容(然后中断过程(，因此您只有80%的机会实际显示内容而不是空格。

上面的代码工作正常，但现在我的情况是我的页面上有几个 iframe。

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

有人伸出援助之手如何实现这一目标？提前非常感谢！

Answer 1

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

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