如何判断是否存在动态加载的图像

时间:2011-03-31 16:00:38

标签: jquery asp.net ajax file-exists

我正在动态地将来自不同网站的图像加载到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是分页的,可以包含数千条记录的结果集,因此我只想检查当前页面上的图像以优化性能。谢谢!

2 个答案:

答案 0 :(得分:2)

使用jquery你可以这样做:

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

$('#imgId').load(function(){
 // ... loaded  
}).error(function(){
 // ... not loaded
 $(this).attr('src','/whatever/default.png');
});

答案 1 :(得分:0)

我只是尝试加载图片,如果收到错误,请回到默认值:

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

编辑:此解决方案可能不起作用,因此我将为您提供备用解决方案。当图片没有加载时,理论上它的width0(假设您没有设置<img>标记的样式)。此代码可能有效:

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