For better display and visitor interaction, image preloading must be implemented in some cases.  Previously we focused on two techniques to achieve image preloading in the following posts:

Today, I would like to compare these two methods to understand the safest and easiest method for preloading images:

Preloading with Javascript:

In order to preload images with Javascript, browsers should support Javascript and it should be turned on. Without Javascript, the preloading will not happen and each time the image is needed, it will be fetched. If the preloaded images will be used on image effects such as rollovers or other effects that require Javascript, preloading with Javascript is the best choice. That way, for browsers that are not supporting Javascript, the images will not be preloaded. 

The Javascript preloading code can be placed anywhere in the page including the HEAD area of the page. If all preloading is done with JS, most of the search engine spiders won’t index the images.

Preloading with CSS:

Preloading with CSS will work even if the browser’s Javascript is turned off. The CSS preloading section should be placed in the BODY of the HTML. 

Search engine spiders indexes the images when they are preloaded with CSS.

Notes on Image Preloading:

Users with slow Internet connection speeds will navigate away if you preload too many or too large images before page content is displayed. 

The JavaScript and the CSS/HTML image preloading code can be used on the same web page at the same time.

Both techniques can be used more than once on the same web page to preload additional images at different points.

Want automatic updates? Subscribe to our RSS feed or
Get Email Updates sent directly to your inbox!

Currently rated 5.0 by 2 people

  • Currently 5/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5


December 10. 2009 16:29

I really liked your method. thanks for sharing thisSmile hope many people will find it useful as I did. have read lots of articles on the topic, but have never thought that could be so easy

torrent search | Reply

December 26. 2009 19:29

Hmmm interesting stuff

cash loans | Reply

Add comment

(Will not be displayed!)