Preloading Images with JavaScript

Preloading images is a useful technique, often used to speed up the display of images in galleries and rollovers. It avoids the flickers or second-long delays that generally occur when an image has not already been loaded.

So, how is preloading done?

The Secret Behind Image Preloading

A browser typically only loads images after a request has been sent for them. In most cases, the request is sent via an <img> tag. However, when using JavaScript to achieve rollovers or image switching, the request is sent after the page has loaded, via a method call. In this last case, the image often flickers because it does not load with the page, but only after it has been requested. For small, highly optimized images, viewed over fast internet connections, there may not be a noticeable delay. However, the larger image gets, or the slower the internet connection, it takes longer and longer to show an image. Obviously, this can be very problematic.

In contrast, image preloading loads the image (into a browser’s cache) long before it is needed. When it is requested, it can then be displayed immediately.

The Code That Makes It Work

The code sample below is the simplest approach to preloading images. This snippet loads two images — apple.gif and banana.gif — into the browser’s cache. To add this to your website, you’d simply insert the following code between the <head> tags of your pages.

<script type="text/javascript">
image1 = new Image();
image1.src = "apple.gif";
image2 = new Image();
image2.src = "banana.gif";
</script>

If you have several images, the above approach would be very inefficient. So instead, using the following code as a guide, you could use an array. See the code sample below.

<script type="text/javascript">
var images = new Array (
"apple.gif",
"banana.gif",
"orange.gif" );
var imageObj = new Image();
for (var i=0; i<images.length; i++) {
imageObj.src = images[i];
}
</script>

After you’ve edited and inserted the code in the head of your webpage, you can continue to reference the images as you always have.

A Better Approach to Preloading Images

Any seasoned web developer will tell you that it is often best to minimize the use of JavaScript when there are other simpler (or more accessible) ways to accomplish the same task. To learn how you can preload your images using CSS, read our article: The CSS Approach: Preload Images without JavaScript.

Tags: , ,

3 Responses to “Preloading Images with JavaScript”

  • Angel April 29, 2011 at 9:27 am

    Even better approach here http://code.google.com/p/core-framework/wiki/ImagePreloading

  • Gabriel Harper September 21, 2012 at 9:22 am

    You can also ditch JavaScript and use a CSS method:

    http://www.scriptalicious.com/blog/2011/08/using-css-to-preload-images-without-javascript/

    Basically use CSS to hide img’s and the browser will load them up just like any other image on the page. :)

Trackbacks

Trackback URL:

Leave a Reply

Want us to work on your project?

Contact us today for a quote. Click here to submit details regarding your project.

If you are making a general inquiry, send an email to info@velvetblues.com

Go Daddy Deal of the Week: Cheap .COM Domains! Offer expires soon!