一个接一个地加载IFrame

Question

Hi i am trying to load 10 iframes on a page but i want them to load one after one ...

Ex: 1st sholud load 1st and when its finish loading 2nd should start loading ... and so on

i was trying this

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

here there is a problem that all of them load together ... is there a way i can do this with javascript or php

Answer 1

Based on this response Dynamically create an iframe and attach onload event to it

Yo could do something like:

  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