Latest TweetsOfficial Resources for #Gutenberg Block Editor: digwp.com/2018/12/resources-gu… #WordPress
Perishable Press

3 Ways to Preload Images with CSS, JavaScript, or Ajax

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 CSS, JavaScript, and various combinations thereof. As one of my favorite topics here at Perishable Press, I have covered image preloading numerous times:

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 (404 link removed 2013/08/21) 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 CSSbackground 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 CSS background properties using Simon Willison’s addLoadEvent() (404 link removed 2012/10/18) script:

// better image preloading @ https://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 :)

Method 2: Preloading with JavaScript Only

As effective as the previous method happens to be, I generally find it to be too tedious and time-consuming to actually implement. Instead, I generally prefer to preload images using a straight-up slice of JavaScript. Here are a couple of JavaScript-only preloading methods that work beautifully in virtually every modern browser..

JavaScript Method #1

Unobtrusive, gracefully degrading, and easy to implement, simply edit/add the image paths/names as needed — no other editing required:

<div class="hidden">
	<script type="text/javascript">
		<!--//--><![CDATA[//><!--
			var images = new Array()
			function preload() {
				for (i = 0; i < preload.arguments.length; i++) {
					images[i] = new Image()
					images[i].src = preload.arguments[i]
				}
			}
			preload(
				"http://domain.tld/gallery/image-001.jpg",
				"http://domain.tld/gallery/image-002.jpg",
				"http://domain.tld/gallery/image-003.jpg"
			)
		//--><!]]>
	</script>
</div>

This method is especially convenient for preloading large numbers of images. On one of my gallery sites, I use this technique to preload almost 50 images. By including this script on the login page as well as internal money pages, most of the gallery images are preloaded by the time the user enters their login credentials. Nice.

JavaScript Method #2

Here’s another similar method that uses unobtrusive JavaScript to preload any number of images. Simply include the following script into any of your web pages and edit according to the proceeding instructions:

<div class="hidden">
	<script type="text/javascript">
		<!--//--><![CDATA[//><!--

			if (document.images) {
				img1 = new Image();
				img2 = new Image();
				img3 = new Image();

				img1.src = "http://domain.tld/path/to/image-001.gif";
				img2.src = "http://domain.tld/path/to/image-002.gif";
				img3.src = "http://domain.tld/path/to/image-003.gif";
			}

		//--><!]]>
	</script>
</div>

As you can see, each preloaded image requires a variable definition, “img1 = new Image();”, as well as a source declaration, “img3.src = "../path/to/image-003.gif";”. By replicating the pattern, you can preload as many images as necessary. Hopefully this is clear — if not, please leave a comment and someone will try to help you out.

We can even improve this method a bit by delaying preloading until after the page loads. To do this, we simply wrap the script in a function and use addLoadEvent() to make it work:

function preloader() {
	if (document.images) {
		var img1 = new Image();
		var img2 = new Image();
		var img3 = new Image();

		img1.src = "http://domain.tld/path/to/image-001.gif";
		img2.src = "http://domain.tld/path/to/image-002.gif";
		img3.src = "http://domain.tld/path/to/image-003.gif";
	}
}
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);

Ahhh, the joys of JavaScript!

Method 3: Preloading with Ajax

As if all of that weren’t cool enough, here is a way to preload images using Ajax. This method was discovered at Of Geeks and letters, and uses the DOM to preload not only images, but CSS, JavaScript, and just about anything else. The main benefit of using Ajax over straight JavaScript is that JavaScript and CSS files can be preloaded without their contents affecting the current page. For images this is not really an issue, but the method is clean and effective nonetheless.

window.onload = function() {
	setTimeout(function() {
		// XHR to request a JS and a CSS
		var xhr = new XMLHttpRequest();
		xhr.open('GET', 'http://domain.tld/preload.js');
		xhr.send('');
		xhr = new XMLHttpRequest();
		xhr.open('GET', 'http://domain.tld/preload.css');
		xhr.send('');
		// preload image
		new Image().src = "http://domain.tld/preload.png";
	}, 1000);
};

As is, this code will preload three files: “preload.js”, “preload.css”, and “preload.png”. A timeout of 1000ms is also set to prevent the script from hanging and causing issues with normal page functionality.

To wrap things up, let’s look at how this preloading session would look written in plain JavaScript:

window.onload = function() {

	setTimeout(function() {

		// reference to <head>
		var head = document.getElementsByTagName('head')[0];

		// a new CSS
		var css = document.createElement('link');
		css.type = "text/css";
		css.rel  = "stylesheet";
		css.href = "http://domain.tld/preload.css";

		// a new JS
		var js  = document.createElement("script");
		js.type = "text/javascript";
		js.src  = "http://domain.tld/preload.js";

		// preload JS and CSS
		head.appendChild(css);
		head.appendChild(js);

		// preload image
		new Image().src = "http://domain.tld/preload.png";

	}, 1000);

};

Here we are preloading our three files upon page load by creating three elements via the DOM. As mentioned in the original article, this method is inferior to the Ajax method in cases where the preloaded file contents should not be applied to the loading page.

Know some triks?

I love these preloading tricks so much, I could just squeeze something. If you know of any good preloading tricks, including any improvements to the techniques shared here, kick start my heart with your wise words of preloading wisdom ;)

Jeff Starr
About the Author Jeff Starr = Web Developer. Book Author. Secretly Important.
Archives
41 responses
  1. Jeff Starr

    Good catch, russell – fixed :)

  2. Useful post.

    Another very simple way to pre-load images using CSS can be found here : http://www.prismgraphicdesign.co.uk/blog/?p=12

  3. If i remember well, did i read an article which said that display:none isn’t a suitable solution because of validation problems or the else… but i am not sure.
    I think that this article mentioned the most modern and recommended solutions for image preload. :-)

  4. Don’t use all weird and complex techniques to preload images! Use one image sprite instead! (Less requests, smaller filesize and faster rendering)

  5. hehe, my words :P

  6. Jeff Starr

    @Basch, @justin: as discussed in a previous comment, image sprites are useful for background images, but are not practical for preloading actual images (i.e., those called via <img> tags). And even for background images, excessively large sprites — such as would be necessary for visually complex designs — impact performance on the user’s browser because of the large amount of memory required to render/display them.

    Bottom line: use sprites for small numbers of background images and keep their sizes as small as possible. For anything else, consider preloading and/or lazy loading.

  7. Michael Risser December 31, 2009 @ 9:07 am

    Great post, lots of useful methods. I keep a number of commonly used JavaScript functions in a single file that I load into each page, rather than mucking about with the function for every site, I modified the first JavaScript + CSS function to dynamically append the divs to the page. Just pass an array of image paths to the function when you call it.

    This makes it much more portable, and if for some reason you should want to preload a different set of images, just pass the function a different image array on those pages.

    For the benefit of your readers, here’s the modified function:

    // Preload images, takes an array of image paths as its only argument,
    // loops throught the array and sets each image as the background of a div,
    // the div is then appended to the body of the document.
    function img_preloader(images) {
           if(document.getElementById) {
                  for(img in images) {
                         var newdiv = document.createElement('div');
                         newdiv.style.background = "url(" + images[img] + ") no-repeat -9999px -9999px";
                         document.body.appendChild(newdiv);
                  }
           }
    }

  8. Jeff Starr

    @Michael Risser: thanks for the feedback — your method sounds great, but unfortunately WordPress seems to have gobbled the code. If you want to send it via email to jeff at this domain, I would be happy to (re)post it for you, and for the benefit of others. Thanks :)

    Edit: Thanks for sending the code! I have updated your comment to include it. Looks awesome :)

  9. @Jeff: hehe, absolutely correct. I really appreciate your listing of several methods to solve this problem. I just meant that sprites are the easiest solution, in my eyes, but of course: only if possible = smaller images. Complex and large designs with big images: not that useful and your methods would be much more interesting in such a case :-) so, thanks!

  10. Preloading images that are not currently displayed but will be onMouseOver or :hover is cool, but you might want to take into account a different scenario.

    For instance, pre-loading images that are required BEFORE onLoad is called, as onLoad is when all page assets have been fully loaded (including images!). What if we wanted to load images / content before a page is fully rendered / revealed? In this case, it would be more appropriate to use something like MooTools’

    window.addEvent( 'domready', .... );

    or jQuery’s

    $( function( ){ ... } );

    here’s an example I did for my DJ page a while ago (djfunkthesystem.com):

    window.addEvent( "domready", function( )
    {
           var shower_object = $( 'shower' ),
                  hider_object = $( 'hider' ),
                  fx_hider = new Fx.Tween( hider_object, { duration: 3000 } ),
                  fx_shower = new Fx.Tween( shower_object, { duration: 3000 } ),
                  preloader = new Image;

           fx_shower.set( 'opacity', '0' );

           preloader.onload = function( )
           {
                  shower_object.style.backgroundImage = 'url(' + this.src + ')';
                  fx_hider.start( 'opacity', '0' );
                  fx_shower.set( 'visibility', 'visible' );
                  fx_shower.start( 'opacity', '1' );
           };

           preloader.src = 'funk_the_system_bg.jpg';
    } );

    Which waits until the Image has loaded, then assigns the CSS property to the . This might’ve been done in some of your examples, I didn’t really look past this page, so if this is the case I’m sorry.

    It just seemed weird to make an onLoad example to pre-load something IF it’s on the page (because that means it’s already been loaded).

  11. Jeff Starr

    @Dan: great point about using onLoad for images already included on the page. Users of either script in method #2 should be advised that they are effective for preloading images that are used on subsequent pages. For same-page uploading, use either of the other methods or take advantage of jQuery or MooTools as you suggest.

  12. @Jeff: Very interesting article as usual. And I find this theme excellent.

    Beside this, being very very new to javascript, could you tell me more about the variable definition required for method #2 using javascript? How it differ from the path to the source….? (A newbie question indeed!)

    Thanks

[ Comments are closed for this post ]