jQuery image loading fails, how to replace the default image

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, event delegation, event capture And the method of preloading images, etc. Friends in need can refer to it.

Here comes the key point: be sure to 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");
});

• ##The event attribute onerror is not recommended, you know~ O.o

• If it is a dynamically added image, 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 loading fails, 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 re-judge after a while, otherwise the image resource may not have been requested when the image was just added. Let’s use this method to judge the problem

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

• The onreadystatechange attribute of img is not discussed, there are browser differences

1.3 Use error event capture to process (global judgment, dynamically added elements can also be - 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 the dynamically generated img tag

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

imagesLoaded is mainly used to load in the waterfall flow mode on the mobile phone Images 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 it is a dynamically added image, you still need to re-judge it ’s

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];
  }
}

Related recommendations:

javascript implementation of asynchronous image upload method example

JS switching image slideshow switching effect

How to set random switching background image in js

The above is the detailed content of jQuery image loading fails, how to replace the default image. For more information, please follow other related articles on the PHP Chinese website!