Checking for existence of thumbnails and images
I am开发者_Go百科 attempting to write some javascript in a page that needs to load one of three images. First it needs to check to see if a Thumbnail for a picture exists and display that, if the thumbnail does not exist, check for the full_size image and display that (scaled down) and if neither a thumbnail or a full-size image exists, use a noimage.gif as a small placeholder. What would be the most efficient way to do this?
Some stipulations, can't do it server side as there is no server. This java script is going to be inserted into a kml file as a . I am mapping a fiber network and this is for the hand-hole portion. Basically, each placemark will have any where from 1 to 5 pics and the names of the pics will be the same as the placemark name with a -1, -2, -3, etc. after each picture. So each of these placemarks gets its style from the same balloonstyle.... and the html I have written in this balloon style calls img src="./images/$[name]-1.jpg" width="120px" height="100px" where $[name] inserts the name of the placemark. This will allow for the users, when they update the kml file and add new placemarks, all they will have to do is rename the jpeg to match the placemark's name and add a -1 to the end of it and dump it in the images folder.... making it so the user doesn't have to edit ANY html (which is too much for them to do)
I would do the checking on the server, then have the server provide a resource path to the available image.
I agree with @Jason Dean, But If you want to detect it by using JavaScript I would do like so: When getting the thumbnail I would attach some kind of id/class property to it and check if it's present.
Check if id of "img-tumb" exists:
var imgThumb = document.getElementById("img-thumb");
if (imgThumb != null){
alert("Thumbnail exists");
}else{
//Check Image size...
Now to check the image size:(Placed after else of last if)
var img = document.getElementById('your_image_id');
var height = img.clientHeight;
var width = img.clientWidth;
To change the height after the image height was detected:
img.style.height = height-50;//Substracks 50 pixles from the original size
img.style.width = width-50;//Substracks 50 pixles from the original size
For you finale event(when none are detected), I would use the same checking as in phase one.
Complete code:
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
}
精彩评论