检查缩略图和图像是否存在

Question

我正在尝试在需要加载三个图像之一的页面中编写一些 JavaScript。首先，它需要检查图片的缩略图是否存在并显示，如果缩略图不存在，则检查 full_size 图像并显示该图像（缩小），如果缩略图或全尺寸图像都不存在，使用 noimage.gif 作为小占位符。做到这一点最有效的方法是什么？

有些规定，不能在服务器端执行，因为没有服务器。该 java 脚本将作为 .kml 文件插入到 kml 文件中。我正在绘制光纤网络，这是用于手孔部分的。基本上，每个地标将有 1 到 5 张图片，图片的名称将与地标名称相同，每张图片后面带有 -1、-2、-3 等。因此，每个地标都从相同的气球样式中获取其样式......并且我在此气球样式中编写的 html 调用 img src="./images/$[name]-1.jpg" width="120px" height ="100px" 其中 $[name] 插入地标的名称。这将允许用户在更新 kml 文件并添加新地标时，他们所要做的就是重命名 jpeg 以匹配地标的名称，并在其末尾添加 -1 并将其转储到图像文件夹中....这样用户就不必编辑任何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...

现在检查图像大小：（放置在最后一个的 else 之后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
}