How to implement image preloading using CSS, JavaScript and Ajax

Preloading images is a great way to improve user experience. With images pre-loaded into the browser, visitors can smoothly surf your site and enjoy blazingly fast loading times. This is very beneficial for image galleries and websites where images take up a large proportion. It ensures that images are published quickly and seamlessly, and it also helps users get a better user experience when browsing your website content. This article will share three different preloading techniques to enhance website performance and usability.

Three methods can be used to implement image preloading: css, JavaScript, and Ajax. The implementation of these methods is introduced below.

Use CSS

Simply use css to load images onto the background of page elements. This method is simple and efficient:

#div1{background:url(http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg) no-repeat -9999px-9999px; }
#div2{background:url(http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg) no-repeat -9999px-9999px; }

When called in other places, as long as the path is consistent, the browser will Use preloaded (cached) images during rendering. Simple, efficient and doesn't require any JavaScript.

Disadvantages: Using this method, the image will be loaded at the same time as the page loads, prolonging the page loading time. It will be more efficient to use JavaScript to assist the completion.

Use CSS and JavaScript combined

functionpreload(){
if(document.getElementById) {
document.getElementById("div1").style.background ="url(http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg) no-repeat -9999px -9999px";
document.getElementById("div2").style.background ="url(http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg) no-repeat -9999px -9999px";
}
}
functionaddLoadEvent(func){
varoldonload =window.onload;
if(typeofwindow.onload !='function') {
window.onload = func;
} else{
window.onload =function(){
if(oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(preload);

We set the image loading to after the page is loaded, so you don’t have to worry about extending the access time due to the images and pages loading at the same time.

Don’t worry if JavaScript fails to run. It’s just that the image preloading fails. When the image is called, it can be displayed normally.

Using JavaScript to implement

Method 1

varimages =newArray()
functionpreload(){
for(i =0; i < preload.arguments.length; i++) {
images[i] = newImage()
images[i].src = preload.arguments[i]
}
}
preload(
"http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg",
"http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg"
)

Method 2

This method actually has the same principle as method 1, except that it is not implemented in an array, but is used as the src of the Image object. negative value.

if(document.images) {
img1 = newImage();
img2 = newImage();
img3 = newImage();
img1.src = "http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg";
img2.src = "http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg";
}

Using Ajax

Assuming that all the above methods are not cool enough, then there is another way, which is to use Ajax to preload images. Use DOM to implement preloading, which can load anything else including images, CSS, and JavaScript. Compared to using JavaScript directly, the advantage of using Ajax is that CSS and JavaScript can be preloaded without affecting the current page. This is really not a problem for images, but nevertheless, this method is still very simple and efficient:

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

Just like this, this code will preload three files: preload.js, preload.css, preload .png. Setting a delay of 1 second is mainly to prevent the loading of JavaScript files from causing functional problems on normal pages.

To encapsulate it, let’s see how to use native JavaScript to write this piece of code:

window.onload =function(){
setTimeout(function(){
// reference to <head>
varhead =document.getElementsByTagName(&#39;head&#39;)[0];
// a new CSS
varcss =document.createElement(&#39;link&#39;);
css.type = &#39;text/css&#39;;
css.rel = &#39;stylesheet&#39;;
css.href = &#39;http://domain.tld/preload.css&#39;;
// a new JS
varjs =document.createElement(&#39;script&#39;);
js.type = &#39;text/javascript&#39;;
js.src = &#39;http://domain.tld/preload.js&#39;;
// preload JS and CSS
head.appendChild(css);
head.appendChild(js);
// preload image
newImage().src =&#39;http://domain.tld/preload.png&#39;;
}, 1000);
};

Here, we have created three elements through the DOM to preload three files on the page. As mentioned in the original article, this approach is not so good for Ajax. Preloaded file content should not be added to the loading page.