Как проверить существование картинки по УРЛ адресу?

Question

[Alex]

Нужно проверить существует ли изображение по некоему урл адресу в пределах сайта.
И если оно существует - вставить его в тег <img>
А если не существует выполнить ajax запрос.

Comments

[Сергей Сергей]

Попытаться загрузить картинку, далее по image.onload что-нибудь сделать.

Answer 1

[hime2]

Запрашивать по этому url картинку и смотреть ответ сервера, если 200 то все хорошо.
Можно на php, можно на js, сканированном пикселей.. к примеру такой, загрузить.. разибить и если к примеру картинка содержит один цвет, значит ее нет. Ну это такая идея.. не много чудная.

Answer 2

[Axian Ltd.]

Cross-site scripting в JavaScript? Маловероятно IMHO. Если я правильно помню - обращение к URL другого сайта из JS запрещено.

Comments

[Alex]

Проверить в пределах сайта

[hime2]

Просто http запрос может решить это

Answer 3

[Dmitriy Mozgovoy]

пытаться грузить, ловить ошибку..
stackoverflow.com/questions/3381663/how-to-check-i...

и на чистом в целях популяризации ;)

function request( url, type, data){

         if(!url)return Promise.reject(TypeError("url is missing"));

         return new Promise(function(resolve,reject){
             var xmlhttp = new XMLHttpRequest();
             xmlhttp.open(type||'GET', url, true);
             xmlhttp.onreadystatechange = function(){
                 if (xmlhttp.readyState == 4) {
                     if(xmlhttp.status >= 200 && xmlhttp.status<400 ) {
                         resolve(xmlhttp);
                     }else{
                         reject(xmlhttp.status);
                     }
                 }
             };
             xmlhttp.onerror=xmlhttp.ontimeout=reject;
             xmlhttp.send(data||null);
         })
     }

     function isImageExists(url,timeout){
         if(url) {
             return new Promise(function(resolve, reject)
             {
                var img=document.createElement("img"), timer, counter=0;
                 function clear(){
                     if(timer){
                         clearInterval(timer);
                         timer=null;
                     }
                 }
                timer=setInterval(function(){
                    if(img.width){
                        clear();
                        resolve(img);
                    }else{
                        if((counter+=20)>(timeout||5000)){
                            clear();
                            reject(Error("timeout"));
                        }
                    }
                },20);
                img.onload=function(){
                    clear();
                    resolve(img);
                }
                img.onerror=function(error){
                    clear();
                    reject(error);
                }
                img.src=url;
             });
         }
         return Promise.reject(TypeError("url missing"));
     }

     isImageExists("gfx/ajax-loader.gif").then(function(img){
         console.log("img loaded", img);
         document.body.appendChild(img);
     },function(error){
         console.warn("image missing",error);
         request("/index.php?action=error","GET");
     })

Comments

[hime2]

А смысл ? просто http запрос может решить это

[Dmitriy Mozgovoy]

hime2: откуда мне то знать?=) топикстартеру виднее...

[hime2]

Digital Brain: Просто на самом деле, зачем городить велосипед.. Если http не подошел, то js, простая проверка, а дальше уже через DOM твори что хочешь, даже сохранить можно изменения.
JS вообще сильный язык, если бы его не ограничители

[Dmitriy Mozgovoy]

hime2: и чем это у Вас отличается по алгоритму? "Если http не подошел" что Вы под этим имеете ввиду? Тут иного выхода , кроме грузить img и обрабатывать ошибку нет... тогда какие велосипеды?