Sharing of various js image preloading implementation methods_javascript skills

There are generally several ways to preload images

1.html tag or css loading image

Obviously we can preload images using the img tag or through the background-image attribute of the tag. But in order to avoid loading too many pictures for the first time and affecting the experience. It is generally best to load the document after the document is rendered (using window.onload, etc.).

2. Pure js to implement preloading

The Empty City Plan-Code’s Javascript implements the preloading of images. The complete preloading example is

function preloadimages(arr){  
  var newimages=[], loadedimages=0
  var postaction=function(){} //此处增加了一个postaction函数
  var arr=(typeof arr!="object")? [arr] : arr
  function imageloadpost(){
    loadedimages++
    if (loadedimages==arr.length){
      postaction(newimages) //加载完成用我们调用postaction函数并将newimages数组做为参数传递进去
    }
  }
  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 { //此处返回一个空白对象的done方法
    done:function(f){
      postaction=f || postaction
    }
  }
}

The principle is to create an Image object in a loop, set the src of the object to the specified image, and then monitor the image loading completion onload = function(){imageloadpost()}. When the image loading is completed, imageloadpost will be executed. It turns out that IE6 still has a problem: if the preloaded image is already in memory, the img.onload event will not be triggered again. But IE7+ has no problem. There is no problem with other browsers, so the above img.onload listening event has no compatibility issues.

3.Ajax implements preloading

Ajax requests can request any data, and pictures are no exception. Let’s take a look at js/css preloading

// 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 preloading of images is actually the same as the pure js preloading of images

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

It’s just that the explanation here is ajax loading. It can be understood that new images are all ajax get requests.

The above is the entire content of this article. I hope it will be helpful for everyone to understand js image preloading.