Каков оптимальный способ обработки сломанных изображений?

Таким образом, кажется, что существует несколько способов обработки сломанных изображений на странице html. Я хотел бы знать, какие способы пользуются популярностью и какие способы рассматриваются как лучшая практика?

Чтобы начать, я посмотрел на себя:

function imgErr(source) {     
    source.src = /images/missing.jpg";
    source.onerror = "";
    return true;
}
<img src="test.jpg" alt="test" title="test" onerror="imgErr(this);" />

Плюсы: работает каждый раз, событие всегда будет поймано. Пользователь никогда не видит сломанного изображения. Кажется, хорошо работает в браузерах. Минусы: тег onerror, необходимый для каждого изображения, функция imgErr (источник) должна быть в голове, чтобы уловить ошибки, замедляет время загрузки пользователей,

$('img').error(function(){
  $(this).attr('src', 'missing.jpg');
});

Плюсы: очень маленький код, работает на всех изображениях без изменения их разметки, может быть размещен вне головы Минусы: может пропустить событие ошибки в зависимости от скорости события onload на страницах, замедляет время загрузки пользователей.

$(window).load(function() {
    $("img").each(function() {
        if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
            var src = $(this).attr("src");
            var suffix = src.substring(src.length - 6, src.length).split('.')[0];
            suffix = suffix.charAt(suffix.length - 1);            
            $(this).attr("src", "/static/images/generic/missing_" + suffix + ".jpg");
        }
    });
});

Плюсы: можно размещать в любом месте страницы, исправлять изображения независимо от того, когда они запускаются, не замедляет время загрузки пользователей Минусы: показывает сломанное изображение, пока оно не работает, создавая плохой пользовательский интерфейс.

В моей ситуации время загрузки - самая большая проблема, но я не могу получить последнюю возможность работать в IE должным образом, поскольку она меняет сломанные и не имеет ни одного сломанного изображения!

Cheers, Denis

Ответ 1

Одна мысль о том, что spring состоит в том, чтобы создать обработчик изображения на вашем веб-сервере, т.е.

<img src="fetchimage.aspx?name=test.jpg" alt="test" title="test" />

Игнорируйте aspx, очевидно, что он будет заменен любыми используемыми вами серверами. Затем этот обработчик может обрабатывать имена изображений, которых нет, предоставляя ваш missing.jpg для всех неизвестных имен изображений.

Кроме того, вы застряли с параметрами, которые вы даете, насколько я вижу. Любой javascript, который выполняется перед страницей, загружает риски, не повторяя теги img, которые еще не были получены, и любой script, который ждет готовой страницы, рискует, что пользователь увидит сломанные изображения.

Rock- > Вы < -Hardplace

Ответ 2

По-моему, использование тега alt достаточно, и нет необходимости добавлять сложность к странице, проверяя ее каждый раз при использовании javascript.

Конечно, вам нужно время от времени проверять, что у вас нет сломанного изображения. Есть инструменты для этого.

Ответ 3

В идеале тег alt должен использоваться. Если это жизненно важно, решение javascript действительно не идеально, потому что оно не будет работать, если JS отключен. Тем не менее, вы могли бы сделать свое решение на стороне сервера. Что-то в php можно сделать так, но потребуется база данных или какой-либо способ установки переменных.

<?php
if($image !== ''){?> 
<?php echo '<img src="$imgsrc" alt="$imgalt" />' ?>
}
<?php else {
<?php echo '<img src="$imgmissing" alt="$imgalt" />' ?>
} ?>
<?php } ?>