Search code examples
javascriptjqueryjspiframeiframe-app

Load an iframe once another iframe has finished loading

I have multiple iframe tags in a webpage, but I would like them not to load all at once. Meaning, I want iframe1 to start loading once the page is opened, then when it's completely finished loading, I want iframe2 to start loading, and then completely load, and then iframe3 to start loading, etc.

I'm completely new to JSP and not very expert with JavaScript.

<iframe id="iframe1" src="..."></iframe>
<iframe id="iframe2" src="..."></iframe>
<iframe id="iframe3" src="..."></iframe>
.
.
.
Solution

  • Use html like this:

    <iframe id="iframe1" data-src="..."></iframe>
<iframe id="iframe2" data-src="..."></iframe>
<iframe id="iframe3" data-src="..."></iframe>

    and js:

    $(function() {
  var iframes = $('iframe');
  var i = 0;
  (function next() {
      var iframe = iframes.eq(i++);
      if (iframe.length) {
          iframe.attr('src', iframe.data('src')).load(next);
      }
  })();
});