如何遍歷元素集並檢查每個元素是否在加載之前轉到下一個元素？

Question

我想我需要一些幫助。我有以下代碼檢查我的頁面上的iframe（包含google文檔查看器文檔）是否已加載，如果不加載，直到它最終發生加載。

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％的機會，內容實際上是顯示而不是空白。

上面的代碼工作正常，但現在我的情況有我的網頁上幾個I幀。

我想達到什麼是怎樣的一個循環，對於每一個元素，直到它的內容被加載，然後進入下一個，直到所有的I幀被可靠地加載，並且真正顯示的內容開始一個新的區間。

有人伸出援助之手如何實現這一目標？非常感謝！

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