时间戳

首页 > 解决方案 > 有没有办法在附加回调之前判断是否有错误？

javascript - 有没有办法在附加回调之前判断是否有错误？

问题描述

页面开始加载。

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

然后我们运行一堆 JavaScript，当我们进行上述错误处理时<img>，它遇到了一个错误……/logo.png返回 404 或 500 或其他什么。

现在，这个 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';

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

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

不会为我工作。

标签： javascripthtml

解决方案

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

不过，这是一个快速的答案。每当图像未正确加载时，其naturalWidth和naturalHeight属性将为 0。基于该知识，您可以创建一个函数，如果尚未加载图像，则该函数将注册一个错误侦听器，或者如果是，则立即调用您的侦听器，即 imagescomplete属性设置为 true 但naturalHeightornaturalWidth设置为 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"/>

推荐阅读