檢查縮略圖和圖像是否存在

Question

我正在嘗試在需要加載三個圖像之一的頁面中編寫一些javascript。 首先，它需要檢查圖片的縮略圖是否存在，並顯示該縮略圖，如果縮略圖不存在，請檢查full_size圖像並顯示（按比例縮小），並且縮略圖或全尺寸圖像都不存在，使用noimage.gif作為小占位符。 什么是最有效的方法？

有些規定，因為沒有服務器，所以不能在服務器端執行。 該Java腳本將作為插入到kml文件中。 我正在映射一個光纖網絡，這是針對手孔部分的。 基本上，每個地標都會有1到5張圖片，並且圖片名稱與地標名稱相同，每張圖片后分別帶有-1，-2，-3等。 因此，每個地標都從相同的balloonstyle ....中獲得其樣式。...而我以這種balloon樣式編寫的html稱為img src =“ ./ images / $ [name] -1.jpg” width =“ 120px” height =“ 100px”，其中$ [name]插入地標的名稱。 這將允許用戶在更新kml文件並添加新的地標時，只需將jpeg重命名以匹配地標的名稱，並在其末尾添加-1並將其轉儲到images文件夾中即可。 ....這樣，用戶就無需編輯任何html（這對他們來說太多了）

Answer 1

我將在服務器上進行檢查，然后讓服務器提供可用圖像的資源路徑。

Answer 2

我同意@Jason Dean的觀點， 但是，如果您想使用JavaScript進行檢測，我會這樣做：當獲取縮略圖時，我將附加某種id / class屬性，並檢查其是否存在。

檢查是否存在“ img-tumb”的ID：

var imgThumb = document.getElementById("img-thumb");
if (imgThumb != null){
    alert("Thumbnail exists");
}else{
//Check Image size...

現在檢查圖像大小：（放置在最后一個if之后）

var img = document.getElementById('your_image_id'); 
var height = img.clientHeight;
var width = img.clientWidth;

在檢測到圖像高度后更改高度：

img.style.height = height-50;//Substracks 50 pixles from the original size
img.style.width = width-50;//Substracks 50 pixles from the original size

對於您的結局事件（未檢測到任何事件），我將使用與第一階段相同的檢查。

完整的代碼：

 var imgThumb = document.getElementById("img-thumb");
 var imgFull = document.getElementById("img-full");//Full sized image
    if (imgThumb != null){
        alert("Thumbnail exists");
    }else if(imgFull != null){
    //Check Image size...
    alert("Full sized image exists");
    var img = document.getElementById('your_image_id'); 
    var height = img.clientHeight;
    var width = img.clientWidth;
    img.style.height = height-50;//Substracks 50 pixles from the original size
    img.style.width = width-50;//Substracks 50 pixles from the original size

    }else{
    //Place noimage.gif
}