load IFrame one after other

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

PHP will not delay output to the browser. It will place all 10 iframes on the page at once and they will load simultaneously. PHP is server side, meaning it can't react to events your browser receives from external sources. PHP is there only to serve up the page, and then call it quits until it gets another request.

For what you are trying to do, Javascript would be key. Create a function on page load to add an iframe, create a listener to wait for the iframe to be loaded completely. When it receives the response, create your next iframe. That is an outline. Check out: How do I fire an event when a iframe has finished loading in jQuery? (2nd answer) to see how to listen for iframe loading.

Answer 2

I believe you should use JavaScript and the iframe's onLoad event. http://www.w3schools.com/jsref/event_frame_onload.asp

Just code it up so once the iframe is loaded, it starts to load the next one.

Answer 3

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