Как узнать, существует ли динамически загружаемое изображение

Я динамически загружаю изображения с другого веб-сайта в элемент управления asp.net ListView следующим образом:

<ListView>
   <ItemTemplate>
      <img src='<%# string.Format("http://www.Website.com/Images/{0}", Eval("ImageName")) %>' />

Иногда изображения не существуют, и мне нужно изменить src на статический путь: src="/whatever/default.png". Каков самый быстрый способ проверить, существует ли изображение, и обновить src, если это не так (любые возможности на стороне клиента через jQuery)? ListView выгружается и может содержать результирующий набор из тысяч записей, поэтому я хотел бы проверять только изображения, находящиеся на текущей странице, для оптимизации производительности. Спасибо!


jquery ajax asp.net file-exists
person StronglyTyped    schedule 31.03.2011    source источник

Ответы (2)


arrow_upward
2
arrow_downward

используя jquery, вы можете сделать это следующим образом:

<img src="http://myimages.com/image.jpg" id="imgId" />

$('#imgId').load(function(){
 // ... loaded  
}).error(function(){
 // ... not loaded
 $(this).attr('src','/whatever/default.png');
});
person ezmilhouse    schedule 31.03.2011
comment
Благодарю. окончательное решение, которое обрабатывает частичные обратные передачи внутри панели обновления: ); }); }); function LoadCheck() { $('.ThumbnailImage').load(function () { }).error(function () { $(this).attr('src', 'website.com/images/default.jpg'); }); } - person StronglyTyped; 31.03.2011

arrow_upward
0
arrow_downward

Я бы просто попытался загрузить изображения, и если вы получите сообщение об ошибке, вернитесь к значениям по умолчанию:

$('img').error(function()
{
  $(this).attr('src', '/whatever/default.png');
});

EDIT: это решение может не работать, поэтому я предоставлю вам альтернативное решение. Когда изображение не загружается, теоретически оно имеет width из 0 (при условии, что вы не применяли стиль для тегов <img>). Этот код может работать:

$('img').each(function()
{
  if ($(this).width() == '0px')
  {
    $(this).attr('src', '/whatever/default.png');
  }
});
person Blender    schedule 31.03.2011