Summary of jQuery methods to determine whether the image is loaded_jquery

For image processing, such as slide show, zoom, etc., all rely on operating after all images are completed.

Today, let’s look at how to determine when all images have been loaded. Before loading is complete, you can use the loading gif image to indicate that it is loading.

1. Ordinary method

Listen to the load method of img and compare it every time an image is loaded. The key code is as follows:

var num = $img.length;

$imgs.load(function() {
  num--;
  if (num > 0) {
    return;
  }
  console.log('load compeleted');
}

2. Use the Deferred object in jQuery

Deferred object is a new feature introduced from jQuery 1.5.0 version. For detailed introduction, please see the official documentation.

Simply put, the Deferred object is jQuery's callback function solution. It solves the problem of how to handle time-consuming operations, provides better control over those operations, and a unified programming interface.

Ruan Yifeng has an article that introduces Deferred objects. It is written in more detail and is more useful for getting started.

Detailed explanation of jQuery’s deferred object

Here, we used:

deferred.resolve(): Resolve a Deferred object and call any doneCallbacks with the given args.
deferred.when(): Provides a way to execute callback functions based on one or more objects, usually Deferred objects that represent asynchronous events.
deferred.done(): Add handlers to be called when the Deferred object is resolved.

Key code:

var defereds = [];

$imgs.each(function() {
  var dfd = $.Deferred();

  $(this).load(dfd.resolve);
  defereds.push(dfd);
});
$.when.apply(null, defereds).done(function() {
  console.log('load compeleted');
});

Basic idea:

Every time a picture is loaded resolve(), when() executes done() when all Deferreds are completed.

Note: Because the parameters supported by $.when are $.when(dfd1, dfd2, dfd3, ...), we use apply here to accept array parameters.

complete to determine whether the image is loaded

Thanks to Google, I found a useful method. The simple usage is:

qim=new Image();//新建一个图片；
qim.src=$preload;//图片地址是你准备要加载的地址；
if(qim.complete){ $("#cxNfloor").html($filetoload);//qim.complete表示这个图片是否加载完毕了
}

Later I discovered a method

$("").load(function(){...});

The selector is the id or class of the image, and the method in the function is the callback function, which is executed after the image is loaded. However, I have tried a lot and it is not the case at all. The correct solution is:

//jquery的方式
$("#imageId").load(function(){
  alert("加载完成！");
});

A friend said that using js is the best, the method is as follows

Copy code The code is as follows:

document.getElementById("img2").onload=function(){}

Find a piece of code online
Example

function loadImage(url, callback) {
 var img = new Image(); //创建一个Image对象，实现图片的预下载
 img.src = url;
 
 if(img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数
   callback.call(img);
   return; // 直接返回，不用再处理onload事件
  }
 img.onload = function () { //图片下载完毕时异步调用callback函数。
    callback.call(img);//将回调函数的this替换为Image对象
  };
};

The following is the loading judgment for multiple images.

var imgdefereds=[];
$('img').each(function(){
 var dfd=$.Deferred();
 $(this).bind('load',function(){
 dfd.resolve();
 }).bind('error',function(){
 //图片加载错误，加入错误处理
 // dfd.resolve();
 })
 if(this.complete) setTimeout(function(){
 dfd.resolve();
 },1000);
 imgdefereds.push(dfd);
})
$.when.apply(null,imgdefereds).done(function(){
  callback();
});

Using this method can avoid the shortcomings of window.onload, but the code is slightly complicated and its performance is much better than window.onload.