Проверьте, существует ли изображение перед загрузкой

Я использовал примеры из других вопросов о переполнении стека, и по какой-то причине это не работает для меня. Я сделал функцию для получения миниатюрных изображений и возврата либо фактического пути к изображению, либо пути к стандартному (без миниатюр) изображению.

Используя как JQuery-подход, так и класс Javascript Image, я получаю 404 ошибки, касающиеся отсутствующих изображений в консоли, и найденные изображения не ошибаются, но не отображаются. Может кто-нибудь указать, что я делаю неправильно?

В функции getThumbnail() "image_url" при записи в консоль выглядит правильно. Когда я нахожусь в вызывающей функции и записываю возвращенное значение, оно просто отображается как "неопределенное".

JQuery:

function getThumbnail(name)
{
    var image_url = "images/" + name + ".jpg";

    $.get(image_url)
        .done(function()
        {
            return image_url;
        })
        .fail(function()
        {
            return "images/default.jpg";
        })
}

Javascript:

function getThumbnail(name)
{
    var image = new Image();
    image.src = image_url;

    image.onload = function()
    {
        return image;
    }
    image.onerror = function()
    {
        return "images/default.jpg";
    }
}

Функция вызова:

            $.each( cycle, function( key, value )
            {
                var mapIndex = key;
                var mapValue = value;

                var brick = "<div class='brick small'><a class='delete' href='#'>&times;</a><img src='" + getThumbnail(value) + "' /><h2><span>" + value + "</span></h2></div>";
                $( ".gridly" ).append( brick );
            });
Источник

4 ответа

Решение

Проблема, которая не работает, заключается в том, что метод getThumbnail() не будет вести себя так, как вы хотите.

.Onload - это асинхронный вызов, и в этом случае getThumbnail(value) всегда будет иметь неопределенный возвращаемый результат;

Чтобы выполнить то, что вы хотите, вы можете сделать что-то вроде:

<img src="/image/..." onerror="javascript:this.src='images/default.jpg'"/>
Источник

Это не работает, потому что return в onerror а также onload функции, и поскольку запрос является асинхронным, функция не будет ждать, пока повторная проверка не будет выполнена.

Вы можете добиться этого с помощью обратного вызова.

function callback(src, value){
                var brick = "<div class='brick small'><a class='delete' href='#'>&times;</a><img src='" + src + "' /><h2><span>" + value + "</span></h2></div>";
                $( ".gridly" ).append( brick );
}

function getThumbnail(name, c)
{
    var image_url = "images/" + name + ".jpg";

    var image = new Image();

    image.onload = function()
    {
        c(image_url, name);
    }
    image.onerror = function()
    {
        c("images/default.jpg", name);
    }

    image.src = image_url;
}

$.each( cycle, function( key, value )
{
    var mapIndex = key;
    var mapValue = value;

    getThumbnail(value, callback);
});
Источник 
      <img src="/image/..." onerror="javascript:this.src='images/default.jpg'"/> will work bustyou HAVE TO make sure THAT image exists. Otherwise you will go into an endless loop of the onerror trying to find an image.
Источник

используя стандартный xmlhttprequest, легко

      var x = new XMLHttpRequest(); x.open("get", "your_url.com/image.ext or /image.png or image.jpg", true);x.onreadystatechange = function () { if (this.readyState == 4 && this.status == 200) {alert('exist');}else{alert('does not exist'};}; x.send();

или простой способ

      var i = new Image(); i.onload = alert('exist'); i.onerror = alert('npt exist'); i.src = imageSrc;
Источник
Другие вопросы по тегам