Проверьте, существует ли изображение на сервере с помощью JavaScript?

Question

Использование javascript - способ узнать, доступен ли ресурс на сервере? Например, у меня есть изображения 1.jpg - 5.jpg, загруженные на страницу html. Я бы хотел вызвать функцию JavaScript каждую минуту или около того, чтобы примерно сделать следующий код нуля ...

if "../imgs/6.jpg" exists: 
    var nImg = document.createElement("img6"); 
    nImg.src = "../imgs/6.jpg"; 

Мысли? Благодаря!

Answer 1

Вы могли бы использовать что-то вроде:

function imageExists(image_url){ 

    var http = new XMLHttpRequest(); 

    http.open('HEAD', image_url, false); 
    http.send(); 

    return http.status != 404; 

} 

Очевидно, что вы могли бы использовать JQuery/аналогичный для выполнения вашего запроса HTTP.

$.get(image_url) 
    .done(function() { 
     // Do something now you know the image exists. 

    }).fail(function() { 
     // Image doesn't exist - do something else. 

    }) 

Answer 2

Если вы создаете тег изображения и добавляете его в DOM, его огонь или событие onerror должны срабатывать. Если запущен onerror, изображение не существует на сервере.

Answer 3

Вы можете просто проверить, загружено или нет изображение, используя встроенные события, которые предоставляются для всех изображений.

В onload и onerror событий покажет вам, если изображение успешно загружен, или если произошла ошибка:

var image = new Image(); 

image.onload = function() { 
    // image exists and is loaded 
    document.body.appendChild(image); 
} 
image.onerror = function() { 
    // image did not load 

    var err = new Image(); 
    err.src = '/error.png'; 

    document.body.appendChild(err); 
} 

image.src = "../imgs/6.jpg"; 

Answer 4

Вы можете использовать основной способ изображения Preloaders работу, чтобы проверить, если изображение существует.

function checkImage(imageSrc, good, bad) { 
    var img = new Image(); 
    img.onload = good; 
    img.onerror = bad; 
    img.src = imageSrc; 
} 

checkImage("foo.gif", function(){ alert("good"); }, function(){ alert("bad"); }); 

JSFiddle

Answer 5

Если кто приходит на эту страницу ищет, чтобы сделать это в Реагировать -На клиент, вы можете сделать что-то вроде ниже, который был ответ оригинал при условии Бен Альперт из Реагировать команда here

getInitialState: function(event) { 
    return {image: "http://example.com/primary_image.jpg"}; 
}, 
handleError: function(event) { 
    this.setState({image: "http://example.com/failover_image.jpg"}); 
}, 
render: function() { 
    return (
     <img onError={this.handleError} src={src} />; 
    ); 
} 

Answer 6

Вы можете назвать это JS функцию, чтобы проверить, если файл существует на сервере:

function doesFileExist(urlToFile) 
{ 
    var xhr = new XMLHttpRequest(); 
    xhr.open('HEAD', urlToFile, false); 
    xhr.send(); 

    if (xhr.status == "404") { 
     console.log("File doesn't exist"); 
     return false; 
    } else { 
     console.log("File exists"); 
     return true; 
    } 
} 

Answer 7

$("img").on("load",function(){ 
    alert(" Image Exists...!"); 
}).on("error", function(){ 
    alert("ERROR"); 
}); 

Демо: @http://jsfiddle.net/Ns5mU/304/