I had a lot of requests from people on how load images using jQuery. So here we go!
Asynchronous Image Loading
Instead of having images load like this:
We want them to appear when it’s ready, like this:
Whether you’re loading a high-resolution image in an image gallery or you have a game with lots of image assets and sprites, the code will do something like this.
- Create an
<img>tag programmatically with jQuery.
- Assign an on load event handler so when the large image loads it assigns the new image url to the new image.
- Assign a URL to the
srcattribute of the new image.
The HTML is straight forward, a simple image.
I’m using a gif with 1 clear pixel that get’s stretched over the whole image tag. If you don’t use an image you’ll get a “missing/broken image” icon like this:
Alternatively you can use a low-resolution of the image you’ll eventually show and when the high-resolution, high-quality image downloads you can swap it out. This is a more progressively enhancing approach.
In my example, I’ve included some CSS that will add a
loading.gif in the background of destination image tag.
To get this effect, I used the following CSS.
This centers the
loading.gif into the middle of the destination image.
Firstly, make sure you have jQuery included in your project. Next, use jQuery to select the image you want to eventually insert the large image into. In my example, it’s the first image on the page.
Then I need to create an image programmatically. In jQuery, you can just select the string of the tag you want to create.
Once you set the
src attribute on this image downloading will start. Before that, we want to ensure that we have a handler for the
load event. Once the image had been downloaded this handler will trigger.
We want to set the destination
$image source to the
$downloadingImage source. The reference to
$this inside the handler is the
$downloadImage. We should use
this since in the handler just in case we use this same handler for other images.
Last but not least, we want to set the
$downloadingImage‘s source attribute.
This will start the image download in the background immediately. Once the download is finished, the
load callback will be triggered. The destination’s image source will be that of the newly downloaded image. And that’s it!
Here’s the complete jQuery code: