Question

页面开始加载。

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

然后，我们运行了一堆JavaScript，并在进行以上<img>的错误处理时，它遇到了错误... /logo.png返回404或500或类似的内容。 / p>

现在，这个JavaScript：

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

是没有用的，因为onload和onerror回调将已经被调用。

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

document.getElementById('logo').complete

但是即使出现错误，这也显示为真，并且在JavaScript控制台中查看和谷歌搜索后，都没有发现与此类似的错误检查结果。

有人知道<img>尝试加载时是否有错误。

我不想使用以下内容：

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

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

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

不会为我工作。

Answer 1

首先，您可能会在此线程中找到一些不错的答案：Check if an image is loaded (no errors) with jQuery（并非所有答案都严格来说是jQuery，但即使那些答案仍然可以提供很好的见识）。

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

您应该可以在打算添加onerror侦听器的任何地方使用此功能。

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="#">

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

2 个答案: