Surfing time - is the loading time in other hand - is the big problem to all websites, site owners. And now, it's one of important factor to Google for ranking our URLs. For the big sites have a lot of images, this problem becomes more important cause the visitor's impatience.

If you own these sites and you need a good JavaScript solution, you should practice 3 ways to JavaScript preload images in this JavaScript tutorial. They're so easy and clear to follow, please go to the detailed post-page for instructions and JavaScript codes.

• Demo
• Enlarge
• Reload
• New window

Preloading images is a great way to improve the user experience. When images are preloaded in the browser, the visitor can surf around your site and enjoy extremely faster loading times. This is especially beneficial for photo galleries and other image-heavy sites where you want to deliver the goods as quickly and seamlessly as possible. Preloading images definitely helps users without broadband enjoy a better experience when viewing your content. In this article, we'll explore three different preloading techniques to enhance the performance and usability of your site.

Method 1: Preloading with CSS and JavaScript

There are many ways to preload images, including methods that rely on Perishable Press, I have covered image preloading numerous times:

• Better Image Caching with CSS
• A Way to Preload Images without JavaScript that is SO Much Better
• Pure CSS: Better Image Preloading without JavaScript
• CSS Throwdown: Preload Images without JavaScript
• Preloading Images with CSS and JavaScript

Each of these techniques sort of builds on previous methods and remains quite effective and suitable for a variety of design scenarios. Thankfully, readers always seem to chime in on these posts with suggestions and improvements. Recently, Ian Dunn posted an article that improves upon my Better Image Preloading without JavaScript method.

With that method, images are easily and effectively preloaded using the following CSS:

#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }
#preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; }
#preload-03 { background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px; }

By strategically applying preload IDs to existing (X)HTML elements, we can use CSS' background property to preload select images off-screen in the background. Then, as long as the paths to these images remains the same when they are referred to elsewhere in the web page, the browser will use the preloaded/cached images when rendering the page. Simple, effective, and no JavaScript required.

As effective as this method is, however, there is room for improvement. As Ian points out, images that are preloaded using this method will be loaded along with the other page contents, thereby increasing overall loading time for the page. To resolve this issue, we can use a little bit of JavaScript to delay the preloading until after the page has finished loading. This is easily accomplished by applying the Simon Willison's addLoadEvent() script:

// better image preloading @ http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/
function preloader() {
	if (document.getElementById) {
		document.getElementById("preload-01").style.background = "url(http://domain.tld/image-01.png) no-repeat -9999px -9999px";
		document.getElementById("preload-02").style.background = "url(http://domain.tld/image-02.png) no-repeat -9999px -9999px";
		document.getElementById("preload-03").style.background = "url(http://domain.tld/image-03.png) no-repeat -9999px -9999px";
	}
}
function addLoadEvent(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	} else {
		window.onload = function() {
			if (oldonload) {
				oldonload();
			}
			func();
		}
	}
}
addLoadEvent(preloader);

In the first part of this script, we are setting up the actual preloading by targeting specific preload elements with background styles that call the various images. Thus, to use this method, you will need to replace the "preload-01", "preload-02", "preload-03", etc., with the IDs that you will be targeting in your markup. Also, for each of the background properties, you will need to replace the "image-01.png", "image-02.png", "image-03.png", etc., with the path and name of your image files. No other editing is required for this technique to work.

Then, in the second part of the script, we are using the addLoadEvent() function to delay execution of our preloader() function until after the page has loaded.

SO what happens when JavaScript is not available on the user's browser? Quite simply, the images will not be preloaded and will load as normal when called in the web page. This is exactly the sort of unobtrusive, gracefully degrading JavaScript that we really like :)

• Code
• Print

• Comment (2)
• Write

by Virus Protection, 12/08/2010 09:08 PM
JPEG instead of PNG Reply

Hey,
Wouldn't it be a way better solutoin to use JPEG images instead of PNG (as used in your example)? Of couse, the one might not outrule the other, but most visitors and sites and running with such fast internet connections that they could easily download/upload JPEG images. Anyway, a neat JavaScript guide.

by grazdesigns, 13/12/2010 12:12 AM
Ehh Reply

Super neat Ajax preloadage, I will most likely use it on my portfolio.

by Preview

Cancel reply

Write your comment

Comments of Guest will be previwed before published
Give your real email to get notifying replies, or comment will be deleted

Your name *
Your email^g *
Your site

Comment's title

I assure 100% I am real human
I repeat I am not bot

• Sent (0)
• New