逐个加载IFrame

Question

你好，我正在尝试在页面上加载10个iframe，但我希望它们一个接一个地加载...

例如：第一个应该先加载完毕，然后第二个才开始加载...以此类推。

我尝试了以下方法：

$i = 1;
while($i < 10){
    echo '<iframe src="/get_data.php?id='.$id.'&i='.$i.'"></iframe>';
    $i++;
    }

这里有一个问题，就是所有这些内容都同时加载... 是否有办法可以用 JavaScript 或 PHP 解决？

- Harinder

---

请查看此帖子：http://codecorner.galanter.net/2011/11/02/how-to-load-iframes-in-order-according-to-priority/。该方法描述了如何按任意指定顺序加载iframe。 - Yuriy Galanter

Answer 1

PHP不会延迟输出到浏览器。它会一次性在页面上放置所有10个iframe，它们将同时加载。PHP是服务器端的，意味着它不能对浏览器从外部源接收到的事件作出反应。PHP只能提供页面，并在收到另一个请求之前结束。

对于您尝试做的事情，JavaScript是关键。创建一个函数来添加iframe，创建一个监听器以等待iframe完全加载。当它接收到响应时，创建您的下一个iframe。这是一个大纲。请查看：如何在jQuery中监听iframe加载完成的事件？（第2个答案）以了解如何监听iframe加载。

- Tim Withers

Answer 2

基于这个回答动态创建iframe并给它附加onload事件

你可以像这样做：

  var urls_to_load = ["http://url.com","http://url2.com","http://url3.com","http://url4.com"];
var i = 0;
function loadIframeAndcheckIfReady(){
    var current_url = urls_to_load[i];
    alert(i);
    frame = document.createElement('iframe');
    document.body.appendChild(frame);
    frame.setAttribute('src',current_url);
    var inter = window.setInterval(function() {
        if (frame.contentWindow.document.readyState === "complete") {
          window.clearInterval(inter);
          i++; //Now we have one url more...
          if(i < urls_to_load.length)loadIframeAndcheckIfReady(); //recursively call the function until i it's iqual to urls_to_load.length
        }
    }, 100);
}
loadIframeAndcheckIfReady(); //Start process

- Gonzalo De-Spirito

Answer 3

我认为您应该使用JavaScript和iframe的onLoad事件。 只需编写代码，使得一旦iframe加载完成，它就开始加载下一个。 http://www.w3schools.com/jsref/event_frame_onload.asp

- Olivier Lerone