요소 집합을 반복하고로드 된 경우 다음 요소로 이동하기 전에 각 요소를 검사하는 방법은 무엇입니까?

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

는 경우 누군가가 관심이가 참으로 필요한 Google 문서 뷰어 완전히 내용을로드하지 않는 경향이있다 (다음 과정을 방해)를 한 번 동안 그래서 당신은 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'); 
    }); 
}