Multiple js image pre-loading implementation methods, js image loading and sharing

Multiple js image pre-loading implementation methods, js image loading and sharing

There are several ways to pre-load images

1.html labels or css loading Images

Obviously, you can use the img tag or the tag's background-image attribute to pre-load images. However, to avoid the impact of loading too many images for the first time. Generally, it is best to load the file after the rendering is complete (Use window. onload, etc ).

2. Pure js for pre-loading

The complete implementation of image pre-loading by using the Javascript Code recorded by the air meter is as follows:

Function preloadimages (arr) {var newimages = [], loadedimages = 0 var postaction = function () {}// A postaction function var arr = (typeof arr! = "Object ")? [Arr]: arr function imageloadpost () {loadedimages ++ if (loadedimages = arr. length) {postaction (newimages) // after loading is complete, call the postaction function and pass the newimages array as a parameter.} for (var I = 0; I <arr. length; I ++) {newimages [I] = new Image () newimages [I]. src = arr [I] newimages [I]. onload = function () {imageloadpost ()} newimages [I]. onerror = function () {imageloadpost ()} return {// The done method for returning a blank object done: function (f) {postaction = f | postaction }}}

The principle is to create an Image object cyclically, set the src of the object to the specified Image, and then listen to the Image loading to complete onload = function () {imageloadpost ()}, after the image is loaded, it is executed to imageloadpost. In the past, IE6 had another problem: if the pre-loaded image is already in the memory, it will not start the img. onload event again. However, IE7 + has no problem. There is no problem with other browsers, so the above img. onload listening event is no longer compatible.

3. Ajax-based pre-loading

Ajax requests can be requested for any data, and images are no exception. Let's take a look at js/css pre-loading.

// 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(''); 

The ajax pre-loading of images is the same as that of pure js pre-loading images.

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

It is explained here as ajax loading. It can be understood that all new images are ajax get requests.

The above is all of the content in this article, hoping to help you understand js image pre-loading.

Articles you may be interested in:

• Javascript is also used to play with image pre-loading.
• Pure JS image batch pre-loading technical code
• Let's talk about the javascript image pre-loading technology (detailed demonstration)
• Js achieves Image pre-loading (js operates Image object attribute complete, event onload asynchronously loads images)
• JS achieves image pre-loading without waiting
• Js uses image objects to pre-load images to increase access speed
• Examples of javascript pre-loaded images, css, and js
• Efficient image pre-loading using CSS, JavaScript, and Ajax