只使用JS检测net :: ERR_FILE_NOT_FOUND

我重新创建了一个蓝图，，它有60多个房间，作为一个内联SVG的。只使用JS检测net :: ERR_FILE_NOT_FOUND

当您选择或悬停房间时，有些功能会显示信息，如，如图片。我使用一个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，但这似乎没有检测到这种错误。

任何想法？

甚至有可能检测到这种错误吗？

来源

2017-03-04 Anthony

首先我会看看是否有一种方法来检查文件是否存在之前文件甚至加载，所以你不会做不必要的请求。如果你的后端有一个数据库可以管理这个数据库，那么这个数据库可以很好地为你服务

既然你让它听起来像只知道文件存在的方式是通过请求它，这里有一个方法让你try this：

function UrlExists(url) 
{ 
    var http = new XMLHttpRequest(); 
    http.open('HEAD', url, false); 
    http.send(); 
    return http.status!=404; 
}

这将不会请求图像两次，因为浏览器的缓存。正如你所看到的那样，这个方法本身就被剥夺了，总体而言，你可以在这个页面加载之前检查这个问题的最佳方法是检查它。如果您有任何类型的数据库或数据结构，如果图像存在或不存在，则向该元素添加一个类或属性。然后，在您现有的方法中，您可以调用类似document.getElementsByClassName('cla-with-image')的内容，以仅获取您确定具有图像的记录（比尝试加载不存在的图像效率高得多）。

如果你最终使用UrlExists方法，那么你可以修改现有的方法是

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

来源

2017-03-04 22:00:28 quetzaluz

的是我会一直使用AJAX，但我现在没有必要用这种权利关心自己。我正在为一家公司构建它，并且它可能是其他人实现它的，所以现在我只关心性能和脱机工作。感谢您的回应!! <3其他想法？ – Anthony

啊，这是我唯一的主要想法（按照最佳做法+这里是一种方法，如果你想）。我更新了我的回复，包括如何在代码中使用现有的方法。我已经提出了你的问题，希望你能得到更多你需要的答复！ – quetzaluz

谢谢!!将脱机工作？ – Anthony

你可以尝试使用FileReader和捕捉它来读取/处理NotFoundError错误。

如果发生错误，您可以将其分配给首先检查悬停的对象或数组。如果该文件位于该数组中，则可以避免尝试再次读取该文件，只需处理即可。

这里是一个很好article由尼古拉斯Zakas使用的FileReader

来源

2017-03-04 22:22:55

我发布这个作为替代@ quetzaluz的建议解决方案，这将是我真正喜欢的方法。 –

再次，将脱机工作？ – Anthony

是的 - 文件都是本地的，正确的？ –

只使用JS检测net :: ERR_FILE_NOT_FOUND

回答

相关问题