只使用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

回答

相關問題