jQuery load content sequentially

Question

I'm currently in the middle of trying to figure out how I can load / preload a large number of content on to a long page website.

The solution I thought of, is to load content, after a previous part has loaded.

THe HTML setup looks like this:

<div class="panel">Panel 1</div>
<div class="panel">Panel 2</div>
<div class="panel">Panel 3</div>
<div class="panel">Panel 4</div>

Is there a way to load Panel 1, then once that has loaded, load Panel 2 and so on...

With most solutions I've looked at, they have suggested loading the content through an external file using the .load() method in jQuery.

If anybody has any advice and/or examples or example code that would be AMAZING.

Answer 1

You can go as well with each. Assuming your setup being final:

$('.panel').each(function(){
  var panelname = $(this).innerHTML;
  var result = $.ajax({
    url: <URL>,
    async: false,
    data: panelname
  });
  $(this).html(result.responseText);
});

or around that thought, but you must have a way to distinct between the panels to load the correct one. This solution should be good for any number of panels.

Answer 2

If you really want to load it separately, that's exactly what jQuery's load is for. For example, suppose you put a data-page attribute on those elements telling each of them what content it should have:

<div class="panel" data-page="page1.html">Panel 1</div>
<div class="panel" data-page="page2.html">Panel 2</div>
<div class="panel" data-page="page3.html">Panel 3</div>
<div class="panel" data-page="page4.html">Panel 4</div>

(You don't have to do that, it's just one way you might tell them.)

Then loading them sequentially (if you really want it to be sequential) is fairly straight-forward:

// Assumes script is at the bottom of the page, just before </body>
(function() {
  var index = 0,
      panels = $(".panel");

  triggerLoad();

  function triggerLoad() {
    var panel;

    if (index <= panels.length) {
      panel = $(panels[index]);
      ++index;
      panel.load(panel.attr("data-page"), triggerLoad);
    }
  }
})();

That works by triggering the first panel's load when the page is first rendered, and then triggering each of the subsequent panel loads using the completion handler of the previous load call.

Live Example | Source

---

In the comments below you talked about waiting for images and such to complete as well. Lacking a body element for the master onload that you get with windows, we have to check for incomplete images (HTMLImageElement has a complete property) and hook their load event. We load the next panel when there are no more incomplete images:

(function() {
  var index = 0,
      panels = $(".panel");

  nextPanel();

  function nextPanel() {
    var panel, imgs;

    display("Checking for panel #" + index);
    panel = panels[index++];
    if (panel) {
      panel = $(panel);
      display("Loading panel");
      panel.load(panel.attr("data-page"), panelLoaded);
    }

    function panelLoaded() {
      display("Panel loaded");
      imgs = panel.find('img');
      imgs.on('load', nextPanelWhenReady);
      nextPanelWhenReady();
    }

    function nextPanelWhenReady() {
      var incomplete = imgs.filter(onlyIncomplete);
      if (incomplete.length === 0) {
        display("No pending images, loading next panel");
        imgs.off('load');
        nextPanel();
      }
      else {
        display("Images left to load: " + incomplete.length);
      }
    }

    function onlyIncomplete() {
      return !this.complete;
    }
  }

  function display(msg) {
    $("<p>").html(String(msg)).appendTo(document.body);
  }
})();

Live Example | Source

That only handles images, but you should be able to generalize the concept for videos as well (I haven't dealt with video tags, and I don't know that you're using them as opposed to Flash videos, etc. — which I also haven't dealt with).