Проверка на наличие миниатюр и изображений - PullRequest
Новая
       1

Проверка на наличие миниатюр и изображений

2 голосов
/ 18 сентября 2011

Я пытаюсь написать какой-нибудь 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 к концу и сбросить его в папку изображений .... делая так, чтобы пользователю не нужно было редактировать ЛЮБОЙ HTML (что слишком много для него)

Ответы [ 2 ]

1 голос
/ 18 сентября 2011

Я бы сделал проверку на сервере, а затем попросил сервер указать путь к доступному образу.

0 голосов
/ 18 сентября 2011

Я согласен с @Jason Dean, Но если вы хотите обнаружить это с помощью JavaScript, я бы сделал так: При получении эскиза я бы прикрепил какое-то свойство id / class кэто и проверьте, присутствует ли он.

Проверьте, существует ли идентификатор «img-tumb»: 

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

Теперь, чтобы проверить размер изображения: (Размещается после остальных из последних, если) 

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
}
...