Problems with image loading failure in jQuery

This article mainly introduces the summary of jQuery image loading failure methods to replace the default image, and the relevant knowledge used jquery's ready method, $("img").error(), img's complete attribute, plug-in imagesLoaded, and event delegation , event capture and image preloading methods, etc. Friends who need it can refer to it

This article mainly discusses several ways to replace the default image after the image loading fails on the page

The key point is: it must be Remember that error events do not bubble up.

Related knowledge points: jquery's ready method, $("img").error(), img's complete attribute, plug-in imagesLoaded, event delegation, event capture and image preloading methods, etc.

1. If the image fails to load, replace it with the default image

1.1 Bind the error event to the image

When The error event will be triggered when the image fails to load

$("img").on("error", function () {
  $(this).attr("src", "../img/img.jpg");
});

• It is not recommended to use the event attribute onerror, you know~O.o

• If it is added dynamically Picture, you need to rebind this event. Event delegation can be used for click events, but event delegation is done using the idea of ​​event bubbling, and error events do not support bubbling

• It is not recommended to use it in the ready method. Bind the error event to img. Maybe when img fails to load the image, img does not bind the error event, which will result in the default image not being replaced.

1.2 Use the complete attribute to Judgment

When the image fails to load, the complete attribute value is false, and when the image is loaded successfully, it is true

$("img").each(function () {

  if (!this.complete || (typeof this.naturalWidth == "undefined" && this.naturalWidth == 0) || !this.src) {
    $(this).attr("src", "../img/img.jpg");
  }
});

• If it is a dynamically added image, it still needs to be re-judged

• You can make a judgment after a while. Otherwise, if you have just added a new image, the image resources may not have been requested yet, so you can use this method to judge whether there will be a problem.

• In HTML 5, two new attributes are added to determine the width and height of the image, namely the naturalWidth and naturalHeight attributes (the image must be completely downloaded to the client browser to determine)

• Img's onreadystatechange attribute is not discussed, there are browser differences

1.3 Use error event capture to process (global judgment, dynamically added elements Also possible - optimal solution)

document.addEventListener("error", function (e) {

  var elem = e.target;
  if (elem.tagName.toLowerCase() == 'img') {
    elem.src = "../img/img.jpg";
  }
}, true);

You can monitor dynamically generated img tags

1.4 Use the method provided by the plug-in imagesLoaded to process

imagesLoaded is mainly used to load images in waterfall flow mode on the mobile phone. It can also be used to handle image loading failures and replace them with default images.

// 用的是jQuery的deferred来实现的
$('img').imagesLoaded()
    .always(function (instance) { // always事件，在所有图片都加载完成（成功与否不论）时触发
      console.log('all images loaded');
    })
    .done(function (instance) { // done事件，在所有图片都加载成功时触发
      console.log('all images successfully loaded');
    })
    .fail(function (instance) { // fail事件，在所有图片都加载完成，并且至少有一张图片加载失败时触发
      console.log('all images loaded, at least one is broken');
    })
    .progress(function (instance, image) { // progress事件，在每一张图片加载完成时都触发一次
      var result = image.isLoaded ? 'loaded' : 'broken'; // 判断当前图片加载成功与否
      image.img.src = image.isLoaded ? image.img.src : "../img/img.jpg";
      console.log('image is ' + result + ' for ' + image.img.src);
    });

If the image is dynamically added, it still needs to be re-judged

2. Image preloading method

// 实现预加载图片，传入的参数是数组，数组的每一项为该图片的地址
function preloadimages(arr) {
  var newimages = [];
  var arr = (typeof arr != "object") ? [arr] : arr; // 确保参数总是数组
  for (var i = 0,len = arr.length; i < len; i++) {
    newimages[i] = new Image();
    newimages[i].src = arr[i];
  }
}

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to use babel to automatically transcode ES6 to ES5 in Webstorm

How to implement it in Bootstrap4 Vue2 Pagination query

How to use keep-alive in vue2

There is an environment configuration for the jquery plug-in in webpack (detailed tutorial)

The above is the detailed content of Problems with image loading failure in jQuery. For more information, please follow other related articles on the PHP Chinese website!