Preloading images is a great way to improve your user experience. The images are preloaded into the browser, and visitors can surf on your website smoothly and enjoy extremely fast loading speeds. This is very beneficial for image galleries and websites where pictures account for a large proportion. It ensures the pictures are published quickly and seamlessly, and can also help users get a better user experience when browsing your website content. This article will share three different preloading technologies to enhance the performance and usability of the website.
Method 1: Use CSS and JavaScript to implement preloading
There are many ways to implement preloading images, including using CSS, JavaScript and various combinations of the two. These technologies can design corresponding solutions according to different design scenarios, which are very efficient.
Using CSS alone can easily and efficiently preload images, and the code is as follows:
The code copy is as follows:
#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 applying these three ID selectors to the (X) HTML element, we can preload the image on the off-screen background through the background property of CSS. As long as the paths of these images remain the same, the browser uses preloaded (cache) images during rendering when they are called elsewhere on the web page. Simple, efficient, and does not require any JavaScript.
Although this method is efficient, there is room for improvement. The pictures loaded using this method are loaded together with other contents of the page, increasing the overall loading time of the page. To solve this problem, we added some JavaScript code to delay the preload time until the page is loaded. The code is as follows:
The code copy is as follows:
// better image preloading @ <A href="http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/">http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/</A> 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 the script, we take the element using the class selector and set the background property for it to preload different images.
In the second part of this script, we use the addLoadEvent() function to delay the loading time of the preloader() function until the page is loaded.
What happens if JavaScript doesn't work properly in the user's browser? It's very simple. The image will not be preloaded. When the page calls the image, it will be displayed normally.
Method 2: Only use JavaScript to implement preloading
The above method is sometimes very efficient, but we gradually find that it takes too much time in actual implementation. Instead, I prefer to use pure JavaScript to preload images. Two such preloading methods are provided below, which can work beautifully on all modern browsers.
JavaScript code segment 1
It is easy to implement by simply editing and loading the path and name of the required image:
The code copy is as follows:
<div>
<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 suitable for preloading large numbers of images. My gallery website uses this technology and has more than 50 preloaded images. Apply the script to the login page, and as long as the user enters the login account, most gallery pictures will be preloaded.
JavaScript Snippet 2
This method is similar to the above method, and can also preload any number of pictures. Add the following script to any web page and edit it according to the program instructions.
The code copy is as follows:
<div>
<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 can be seen, each image loading requires creating a variable, such as "img1 = new Image();" and the image source address declaration, such as "img3.src =
"../path/to/image-003.gif";". Refer to this mode, you can load as many pictures as you want.
We have improved this method again. Encapsulate the script into a function and use addLoadEvent() to delay the preload time until the page is loaded.
The code copy is as follows:
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);
Method 3: Use Ajax to implement preloading
The method given above seems not cool enough, so now let’s look at a method that uses Ajax to implement image preloading. This method uses DOM, not only preloads images, but also preloads CSS, JavaScript and other related things. Using Ajax is better than using JavaScript directly, the advantage is that the loading of JavaScript and CSS will not affect the current page. This method is simple and efficient.
The code copy is as follows:
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);
};
The above code is preloaded with "preload.js", "preload.css", and "preload.png". The 1000 millisecond timeout is to prevent the script from hanging, which causes functional problems on the normal page.
Below, let's see how to implement the loading process using JavaScript:
The code copy is as follows:
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 create three elements through DOM to implement preloading of three files. As mentioned above, with Ajax, the loading file is not applied to the loading page. From this point of view, the Ajax method is superior to JavaScript.
Okay, this article will be introduced here. Everyone has already understood the three methods of implementing image preloading technology. Which one is more efficient? I think friends have also seen it, so apply it to their own projects.