Как перебирать набор элементов и проверять каждый, если они загружены, прежде чем перейти к следующему?

Question

Думаю, мне нужна помощь. У меня есть следующий код, который проверяет, загружен ли iframe (содержащий документ Google Doc viewer) на моей странице, и если он не перезагружает его, пока он, наконец, не будет загружен.

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 просмотр, как правило, не в полной мере загрузить содержимое (а затем прерывает процесс) один раз в то время, и поэтому у вас есть только 80% вероятность того, что содержание на самом деле отображается вместо пустого пространства.

Этот код работает нормально, но теперь у меня есть ситуация, когда на моей странице есть несколько фреймов.

То, что я хочу достичь, - это тип цикла, который для каждого элемента запускает новый интервал, пока его содержимое не будет загружено, а затем перейдет к следующему, пока все фреймы не будут надежно загружены и контент действительно будет отображаться.

Кто-то с рукой помощи, как этого достичь? Большое спасибо заранее!

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