Question

为什么我要使用或其他。附加load事件与检查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
});

Answer 1

完整属性返回浏览器是否已完成加载图像。

如果图像加载完毕，则complete属性返回true。如果图像未完成加载，则此属性返回false。

在这种情况下，他们两个都在做同样的事情，但事件可能发生在我们开始收听之前，所以解决方法是

var img1 = document.querySelector('.img-1');

function loaded() {
  // img has loaded 
}

if (img1.complete) {
  loaded();
}
else {
  img1.addEventListener('load', loaded);
}

Answer 2

它们完全不同：

complete属性仅表示浏览器是否仍在提取数据。每当收到回复时，它会将complete属性设置为true，而不会让您知道它是成功还是失败。

load事件是Event，仅当浏览器成功获取资源时才会触发（在chrome中，它甚至仅在图像处理时才触发，而不是在FF中）。

您无法仅使用load属性替换complete事件。
如果您想知道图像是否已加载，而不是诉诸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">

img标记上的addEventListener（'load'）和.complete属性之间有什么区别

2 个答案: