Sequential Image Loading for Optimized Load Times

If you’re creating a page that is very image heavy, you probably want to make sure that the images further up the page take loading priority over the ones further down the page.

This is especially important for mobile sites where you don’t want a huge image at the bottom of your page taking precious bandwidth away from the more important images above the fold.

There are a lot of ways to accomplish this, but I think I have the easiest solution — sequential loading.

Let’s take some basic markup that we’ll want to make load sequentially:

For sequential loading, we need to do three things:

  1. Make sure the images don’t load too soon
  2. Figure out which images need to be loaded
  3. Load them, in order, one after another

The first one is simple enough — if an image doesn’t have a source, it won’t load. But we also need a way to come back later and set the image source to the correct image. A “data” attribute would be a perfect fit here:

Now that there’s no src on the images, they won’t load until we want them to. But how do we tell the browser what images to load, and when to do it?

For this part we’ll use the duct tape of the internet, jQuery. Our second objective is that we need to get all of the images we want to load, and with jQuery that’s easy:

Now that we know what images need to be loaded, and how many have already been loaded, we can get make a simple function to actually load them:

Now you can put it all together:

And there you have it, stupid simple sequential image loading.

View a demo here.

Leave a Reply

Your email address will not be published. Required fields are marked *