有没有办法在附加回调之前判断是否有<img/>错误？

Question

页面开始加载。

<img id="logo" src="/logo.png">

然后我们运行一堆 JavaScript，当我们进入上述<img>的错误处理时，它遇到了一个错误...... /logo.png返回 404 或 500 之类的东西。

现在，这个 JavaScript：

document.getElementById('logo').onerror = () => {
    console.log('logo img did not load');
}

是无用的，因为加载和错误回调已经被调用了。

查看它是否成功加载的解决方案是检查：

document.getElementById('logo').complete

但即使有错误，这也显示为真实，并且在 JavaScript 控制台和谷歌搜索中查看我没有显示与此类似的错误检查。

有谁知道有什么方法可以查看<img>尝试加载时是否存在错误。

我不想使用以下：

let img = new Image();
img.onerror = () => {
    console.log('logo img did not load');
}
img.src = '/logo.png';

编辑：我无法向html添加任何JavaScript属性。这将很方便，并且在某些情况下是一个解决方案，但这不是我的情况的解决方案。所以这个：

<img id="logo" src="/logo.png" onerror="errorHandler()">

对我不起作用。

Answer 1

首先，您可能会在此线程中找到一些不错的答案： 检查图像是否使用 jQuery 加载(没有错误((并非所有答案都是严格的 jQuery，但即使是那些仍然提供良好见解的答案(。

不过，这里有一个快速的答案。每当图像未正确加载时，其naturalWidth和naturalHeight属性将为 0。基于这些知识，您可以创建一个函数，该函数将在图像尚未加载时注册错误侦听器，或者在尚未加载时立即调用侦听器，即图像complete属性设置为 true，但naturalHeight或naturalWidth设置为 0。

您应该能够在任何打算添加错误侦听器的任何地方使用此函数。

const [img1, img2] = document.querySelectorAll("img")
function onImgError(img, fn){
  if (img.complete){
    if(!img.naturalWidth || !img.naturalHeight){
      fn(new Error("Image not loaded"))
    }
  }
  img.addEventListener('error', fn)
}
setTimeout(()=>{
  // these won't fire when image is already loaded
  img1.addEventListener('error', (e) => {
    console.log("img1 error")
  })
  img2.addEventListener('error', (e) => {
    console.log("img2 error") 
  })
  // but this one will
  onImgError(img1, (e)=>{
    console.error(e)
  })
  // this image loads, so no error
  onImgError(img2, (e)=>{
    console.error(e)
  })
}, 1000)

<img src="fdsf"/>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg" width="100"/>

Answer 2

使用onerror=""事件。

文档：https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onerror

myFunction = (image) => {
     // If this calls, it's gone wrong.
     console.log('Error');
     // Access this
     image.src = 'https://example.jpg';
}

<img src="image.gif" onerror="myFunction(this)">

您还可以为任何错误使用占位符图像，如果检测到，则无需函数即可更改图像。

<img src="image.png" onError="this.onerror=null;this.src='/error.gif';" />

如果您没有像您所说的那样使用属性 javascript，请在页面加载时获取所有图像。使用 .error 通过 JQuery 抓取所有错误。

$('img')
  .error(function() {
    alert( "Handler for .error() called." )
  })
  .attr( "src", "missing.png" );

非 JQuery

var img = document.querySelector('img')
function loaded() {
  alert('loaded')
}
if (img.complete) {
  loaded()
} else {
  img.addEventListener('load', loaded)
  img.addEventListener('error', function() {
    alert('error')
  })
}

<img src="#">