addEventListener('load')和.complete属性在img标签上的区别是什么?

what are the differences between addEventListener('load') and .complete property on the img tag

本文关键字：标签 区别 img 是什么 complete load 属性 addEventListener      更新时间：2023-09-26

为什么我要用on或other呢?附加load事件vs检查complete属性

var img1 = document.querySelector('.img-1');
function loaded() {
  // img loading 
}
if (img1.complete) {
  loaded();
}

或

var img1 = document.querySelector('.img-1');
img1.addEventListener('load', function() {
  // woo yey image loaded
});

complete属性返回浏览器是否完成图片加载。

如果图片加载完成，complete属性返回true。如果图片没有加载完成，这个属性返回false。

在这种情况下，它们都在做同样的事情，但有可能事件发生在我们开始监听它们之前，所以可以使用

var img1 = document.querySelector('.img-1');
function loaded() {
  // img has loaded 
}
if (img1.complete) {
  loaded();
}
else {
  img1.addEventListener('load', loaded);
}

它们是严格不同的:

complete属性仅表示浏览器是否仍在获取数据。每当它得到响应时，它将把complete属性设置为true，而不让您知道它是成功还是失败。

load事件是一个Event事件，只有当浏览器成功获取资源时才会触发(在chrome中，它甚至只有在图像被处理时才会触发，而不是在FF中)。

不能只用complete属性代替load事件。
如果你想知道图像是否已经加载，而不诉诸load事件(例如，因为图像已经在HTML标记中声明)，你还必须检查图像是否在其imageWidth属性中有一个值。

在这种情况下，另一种解决方案是简单地附加事件侦听器，然后再次将图像的src设置为相同的值。如果图片已经加载，它将只从缓存中获取，如果还没有加载，则不会发生新的请求。 

var broken = document.getElementById('broken');
var valid = document.getElementById('valid');
// when the window' load event fires, all resources declared in HTML will be either loaded, either broken.
window.onload = function(){
  console.log('broken complete :', broken.complete);
  console.log('broken loaded :', !!(broken.complete && broken.naturalWidth));
  console.log('valid loaded :', !!(valid.complete && valid.naturalWidth));
  // so it's too late to attach a load event
  
  valid.onload = function(){console.log('loaded again');};
  // except if we force it to fire again
  valid.src = valid.src;
  };
<img id="broken" src="http://fakeserver.co/brokenImage.png">
<img id="valid" src="https://dl.dropboxusercontent.com/s/4e90e48s5vtmfbd/aaa.png">

相关文章：