Take the 2-minute tour ×

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.

share|improve this question

2 Answers 2

up vote 1 down vote accepted

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");


  function triggerLoad() {
    var panel;

    if (index <= panels.length) {
      panel = $(panels[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");


  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);

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

    function onlyIncomplete() {
      return !this.complete;

  function display(msg) {

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).

share|improve this answer
Thanks for this, it seems to work perfectly for text based pages. But if I'm loading images in, the panels still load one after another, even when the images in the previous panel hasn't loaded... Any ideas why this would happen? –  Jason Mayo Feb 3 '13 at 16:43
@JasonMayo: Yes, the images load asynchronously. You'd have to wait to trigger the next round until all the images have loaded, which is a bit more complicated, particularly handling race conditions (e.g., if you hook the load event on the image, are you sure it hasn't already fired?). So you'd probably have to parse the result, find the images, hook the load event, then append that parsed DOM fragment to the relevant panel, then wait for all the load events ot fire... –  T.J. Crowder Feb 3 '13 at 17:47
Okay, you've totally lost me now... :) Is there any examples online you can think of to explain this? I understand fully how your previous code works, but I'm guessing this only works for text / markup? Not video and images? –  Jason Mayo Feb 4 '13 at 0:20
@JasonMayo: I've updated the answer with a solution for waiting for the images to load, hopefully that gets you pointed the right way. –  T.J. Crowder Feb 4 '13 at 17:19
@t-j-crowder: you sir, are the don. This works a charm. I'm going to customise it and add a few other options but that works great. Thank you! –  Jason Mayo Feb 6 '13 at 10:59

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

  var panelname = $(this).innerHTML;
  var result = $.ajax({
    url: <URL>,
    async: false,
    data: panelname

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.

share|improve this answer
There's no reason (and really no excuse :-) ) to use async: false here. You may as well just dump all the content into the page. Using async: false will freeze up the browser until all of the requests are completed. It's also going away (jQuery is dropping it) any minute now. –  T.J. Crowder Feb 1 '13 at 19:21

Your Answer


