javascript - 仅使用 JS 检测 net::ERR_FILE_NOT_FOUND

Question

我重新创建了一个蓝图，有 60 多个房间，作为内联 SVG。

有些功能会在您选择或悬停房间时显示信息，例如图片。我使用一个 div 容器通过将其 background 属性设置为 url('path-of-image.ext') 来显示图片，如下所示。

var cla = document.getElementsByClassName('cla');

for (i = 0; i < cla.length; i++) {
  cla[i].addEventListener('mouseenter', fun);
}

function fun(){
  var str = 'url("media/' + this.id.slice(4) + '.jpg")';
  pictureFrame.style.background = str;
  pictureFrame.style.backgroundSize = 'cover';
  pictureFrame.style.backgroundPosition = 'center'
}

我没有使用 background 属性简写的原因是因为我计划使用 transition 为 background-position 属性设置动画。

但是，并非所有房间都有图片。因此，当您选择或悬停所述房间时，控制台会抛出以下错误，GET ...net::ERR_FILE_NOT_FOUND。 错误不会导致脚本中断，但我不希望每次悬停房间时都运行该代码，即使给定房间没有图片也是如此。

尽管我知道这可以通过 if/else 语句命令式完成，但我还是尝试以编程方式执行此操作，因为有这么多单独的房间。

我试过使用 try/catch，但这似乎没有检测到这种错误。

有什么想法吗？

是否有可能检测到这种错误？

Answer 1

您可以尝试使用 FileReader 读取它并捕获/处理 NotFoundError 错误。

如果它出错，您可以将它分配给一个对象或数组，您将在悬停时首先检查这些对象或数组。如果该文件在该数组中，您可以避免尝试再次读取它并按您喜欢的方式处理。

这是一个很好的article Nicholas Zakas 谈使用 FileReader