Как предотвратить отображение заполнителя изображения, если изображение не найдено?

Есть ли способ не отображать заполнитель изображения, если изображение не найдено? У меня есть изображения, загруженные автоматическим потоком, и для некоторых элементов изображения есть, а для некоторых нет. Итак, если изображения нет, я хотел бы отобразить собственный заполнитель.


javascript image html placeholder
person bobek    schedule 05.08.2011    source источник
comment
Это действительно зависит от того, как вы загружаете изображения через Javascript. Например, если вы используете данные JSON, возвращаемые с сервера, вы можете просто проверить, является ли URL-адрес изображения пустым, и установить для него другой «известный» (по умолчанию) URL-адрес.   -  person Dan Esparza    schedule 06.08.2011

Ответы (3)


arrow_upward
3
arrow_downward

Я нашел ответ здесь

Этот кусок кода отлично работает!

function onImgErrorSmall(source)
{
source.src = "/images/no-image-100px.gif";
// disable onerror to prevent endless loop
source.onerror = "";
return true;
}

И затем назовите это так:

<img src="/images/19013_small.jpg" alt="" onerror="onImgErrorSmall(this)" />
person bobek    schedule 08.08.2011
comment
Или вы можете просто сделать $(source).remove() чтобы избежать дополнительного HTTP-запроса для этого другого изображения. - person Arman Bimatov; 01.03.2014

arrow_upward
0
arrow_downward

попробуй это:

   var tester=new Image()
   tester.onload=function() {createPlaceHolderForImage(); }
   tester.onerror=function() {handleError(); }
   tester.src="http://www.temp.com/image.jpg"

функция onload вызывается, если изображение существует, в противном случае вызывается handleError

person blejzz    schedule 05.08.2011
comment
Не уверен, в какой форме находится фид, который вы используете, но просто убедитесь, что событие ошибки прикреплено к изображениям ДО того, как они попытаются загрузиться. Если интеграция выполняется на серверной части, вам может потребоваться указать URL-адрес src в атрибуте, отличном от «src». Затем с помощью JS вы можете прикрепить событие ошибки, а затем вставить URL-адрес src в атрибут src. Удачи! :) - person Dygerati; 06.08.2011
comment
это просто пример кода, чтобы продемонстрировать, как это можно решить. я не говорю, что это лучший способ: P - person blejzz; 06.08.2011

arrow_upward
0
arrow_downward

Вот пример использования jQuery, это также можно сделать в JavaScript:

<script type="text/javascript">
$(document).ready(function(){
    $("img").each(function(){
        var imgObj = $(this);
        var img = new Image();
        img.onerror=function(){ imgObj.attr('src','placeholder.gif'); }
        img.src = imgObj.attr('src');
    });
});
</script>
<ul>
<li><img src="blah.gif" /></li>
<li><img src="blah.png" /></li>
<li><img src="http://www.google.com/intl/en_com/images/srpr/logo2w.png" /></li>
</ul>

Этот код будет просматривать каждое изображение и проверять, существует ли оно. Если он не существует, он заменяется изображением «placeholder.gif».

person RobB    schedule 05.08.2011
comment
Кажется, у меня возникли проблемы с редактированием сообщения в настоящее время, но вы можете увидеть рабочий пример по адресу: jsfiddle.net/Z7EbP - person RobB; 06.08.2011
comment
Что ж, отлично работает. Спасибо. Однако мне не разрешено использовать jQuery. - person bobek; 07.08.2011