WedX - журнал о программировании и компьютерных науках

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

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

Используя как подход JQuery, так и класс изображений Javascript, я получаю 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 );
            });
javascript image jquery preload image-preloader
01.05.2015

Ответы:


1

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

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

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

<img src="/image/..." onerror="javascript:this.src='images/default.jpg'"/>
01.05.2015
  • Это сработало отлично, я не знал, что это были асинхронные вызовы, но теперь это имеет смысл. Большое спасибо! 01.05.2015
  • onerror выполняется, когда изображение не удалось загрузить, а не перед загрузкой, как запросил OP 18.11.2016
  • Идеальный! Спасибо. 30.01.2018

    • 2

    это не работает, потому что 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);
});
    01.05.2015
  • Я принял другой ответ, так как он намного проще, но это имеет смысл, спасибо за альтернативный подход. 01.05.2015
    • Новые материалы
    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..
    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..
    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..
    Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
    Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..
    Учебные заметки: создание моего первого пакета Node.js
    Это мои обучающие заметки, когда я научился создавать свой самый первый пакет Node.js, распространяемый через npm. Оглавление Глоссарий I. Новый пакет 1.1 советы по инициализации..
    Забудьте о Matplotlib: улучшите визуализацию данных с помощью умопомрачительных функций Seaborn!
    Примечание. Эта запись в блоге предполагает базовое знакомство с Python и концепциями анализа данных. Привет, энтузиасты данных! Добро пожаловать в мой блог, где я расскажу о невероятных..
    ИИ в аэрокосмической отрасли
    Каждый полет – это шаг вперед к великой мечте. Чтобы это происходило в их собственном темпе, необходима команда астронавтов для погони за космосом и команда технического обслуживания..
    Для любых предложений по сайту: [email protected]