Что оптимальный путь состоит в том, чтобы обращаться с разорванными изображениями?
Таким образом, там, кажется, тих несколько способов обращаться с разорванными изображениями на странице 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 правильно, когда это изменяется сломанный и ни один разорванные изображения одинаково!
С наилучшими пожеланиями, Денис
3 ответа
Одной из мыслей, которая делает Spring на ум, состоит в том, чтобы создать обработчик изображений на вашем веб-сервере, т.е.
<img src="fetchimage.aspx?name=test.jpg" alt="test" title="test" />
игнорировать ASPX, очевидно, было бы заменено любым предпочтительным технологией сценариев серверов. Отказ Тогда этот обработчик может иметь дело с именами изображений, которые не присутствуют, доставляя пропущенность .jpg для всех неизвестных имен изображений.
Кроме того, вы застряли с вариантами, которые вы даете, насколько я понимаю. Любой JavaScript, который запускается до того, как страница загрузила риски, не итерацию по меткам IMG, еще не получено, и любой скрипт, который ждет готов к странице, собирается рисковать пользователем, видя сломанные изображения.
Рок-> Вы <-Hardplace
В идеале нужно просто использовать альт-тег. Если это жизненно важно, то решение на JavaScript действительно не идеально, потому что оно не будет работать, если JS будет выключен. Однако вы можете сделать что-то вроде решения на стороне сервера. Что-то в php можно было бы сделать вот так, но это потребовало бы базы данных или какого-то способа установки переменных.
<?php
if($image !== ''){?>
<?php echo '<img src="$imgsrc" alt="$imgalt" />' ?>
}
<?php else {
<?php echo '<img src="$imgmissing" alt="$imgalt" />' ?>
} ?>
<?php } ?>
На мой взгляд, используя тег ALT , и нет необходимости добавлять сложность на страницу, проверяя ее каждый раз, используя JavaScript.
Конечно, вам нужно проверить время от времени, когда у вас нет сломанного изображения. Есть инструменты для этого .