Execute event after image loading is complete

This article mainly shares with you an example of an image loading completion and then execution event. It has a very good reference value. Let’s follow the editor to have a look. I hope it will be helpful to everyone. I hope it can help everyone.

Examples are as follows:

//图片加载
function load(imgSrc,callback) {
 var imgs = [];
 var c = 0;
 for (var i = 0; i < imgSrc.length; i++) {
  imgs[i] = new Image();
  imgs[i].src = imgSrc[i];
  imgs[i].onload = function(){
   c++
   if(c == imgSrc.length){
    if(callback){
     callback();
    }
   }
  }
 }
 return imgs;
}

Application scenarios: Some pages with many pictures, some pages that need to add loading effects such as progress bars or percentage reading, generally used more on mobile pages

Related recommendations:

How to solve the problem of background image loading

JS image loading example code for two effects

Javascript method to implement image loading from blurry to clear display

The above is the detailed content of Execute event after image loading is complete. For more information, please follow other related articles on the PHP Chinese website!