Question

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

有些规定，服务器端无法做到，因为没有服务器。这个java脚本将作为一个插入到kml文件中。我正在映射光纤网络，这是针对手孔部分。基本上，每个地标将具有1到5个图片的任何位置，并且图片的名称将与每个图片后面的-1，-2，-3等的地标名称相同。因此，这些地标中的每一个都从相同的气球样式获得它的风格....并且我用这种气球样式编写的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
}

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

2 个答案: