Using CSS, JavaScript and Ajax to implement image preload method _javascript skills

Pre-loading pictures are a great way to improve the user experience. The picture is preloaded into the browser, and visitors can surf the site smoothly and enjoy a very fast loading speed. This is good for a large percentage of the picture galleries and pictures, which ensures that the images are released quickly and seamlessly, and can help users gain a better user experience when browsing through your site's content. This article will share three different preload technologies to enhance the performance and usability of your site.

To achieve a picture preload you can use CSS, JavaScript, Ajax three ways. The implementation of these methods is described below.

Using CSS

Simply using CSS to load a picture onto the background of a page element 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 invoked elsewhere, the browser uses a preloaded (cached) picture in the rendering process as long as the path is consistent. Simple, efficient, and does not require any javascript.

Disadvantage: Using this method, the picture will load at the same time as the page load, extending the time of the page loading, using JavaScript-assisted completion will be more efficient.

Use CSS and JavaScript to combine

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
() {
if (oldonload) {
oldonload (); 
} 
Func ();
}} Addloadevent (preload);

We set the picture load to the end of the page load, so you don't have to worry about extending the access time because the pictures and pages are loaded at the same time.

If JavaScript fails, you don't have to worry about it, just a picture preloading fails, and it can be displayed normally when you call a picture.

Using JavaScript to implement

Method One

Varimages =newarray ()
functionpreload () {for
(I =0; i < preload.arguments.length; i++) {
Images[i] = NewImage ()
images[i].src = preload.arguments[i] 
}
preload ( 
"yun_qi_img/ 006y8mn6gw1fa5obmqrmvj305k05k3yh.jpg ","
yun_qi_img/006y8mn6gw1fa7kaed2hpj30sg0l9q54.jpg "
)

Method Two

This method is in fact the same principle as the method one, except that it is not implemented in the array, but rather the SRC negative value of the Image object.

if (document.images) {
img1 = NewImage ();
Img2 = NewImage ();
IMG3 = NewImage ();
IMG1.SRC = "Yun_qi_img/006y8mn6gw1fa5obmqrmvj305k05k3yh.jpg";
IMG2.SRC = "yun_qi_img/006y8mn6gw1fa5obmqrmvj305k05k3yh.jpg";
}

Using Ajax

Assuming that all of the above methods are not cool, there is also a way to use Ajax to implement the preload of the picture. Using the DOM to implement preload, you can load anything else that includes pictures, Css,javascript. The advantage of using Ajax in relation to using JavaScript directly is that CSS and JavaScript can be preloaded without their content affecting the current page. This is really not a problem for a picture, but still, the method is 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 = "yun_qi_img/preload.png";
}, 1000);

Like this, this code will preload three files: preload.js,preload.css,preload.png. Setting a 1-second delay is primarily a function of preventing JavaScript files from loading and causing functional problems with normal pages.

To encapsulate it, let's look at how to use native JavaScript to write this piece of code:

Window.onload =function () {
settimeout (function () {
//reference to  
 

Here, we created three elements through the DOM to preload the three files on the page. As mentioned in the original, this method is not so good for Ajax. Pre-loaded file contents should not be added to the page being loaded.

The above is a small series to introduce the use of CSS, JavaScript and Ajax to achieve the picture preload method, I hope to help everyone, if you have any questions please give me a message, small set will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!