Javascript 如果找不到图像,如何防止显示图像占位符?

Javascript 如果找不到图像,如何防止显示图像占位符?,javascript,html,image,placeholder,Javascript,Html,Image,Placeholder,如果找不到图像,是否有方法不显示图像占位符?我已经通过自动提要加载了图像,有些项目有图像,但有些项目没有。因此,如果图像不在那里,我想显示一个自定义占位符。尝试以下操作: var tester=new Image() tester.onload=function() {createPlaceHolderForImage(); } tester.onerror=function() {handleError(); } tester.src="http://www.temp.

如果找不到图像,是否有方法不显示图像占位符?我已经通过自动提要加载了图像,有些项目有图像,但有些项目没有。因此,如果图像不在那里,我想显示一个自定义占位符。

尝试以下操作:

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

如果图像存在,则调用onload函数,否则调用handleError

<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>

$(文档).ready(函数(){
$(“img”)。每个(函数(){
var imgObj=$(此);
var img=新图像();
img.onerror=function(){imgObj.attr('src','placeholder.gif');}
img.src=imgObj.attr('src');
});
});
此代码将遍历每个图像并检查其是否存在。如果它不存在,则替换为“placeholder.gif”图像。

我找到了答案

这段代码非常有效

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)" />


这实际上取决于如何通过Javascript加载图像。例如,如果您使用的是从服务器返回的JSON数据,您只需检查图像url是否为空,然后将其设置为另一个“已知”(默认)url。不确定您使用的提要位于哪个表单中,但只需确保在图像尝试加载之前将错误事件附加到图像即可。如果集成是在后端完成的,则可能需要在“src”以外的属性中包含src URL。然后,通过JS可以附加错误事件,然后将src url插入src属性。祝你好运!:)这只是演示如何解决这个问题的示例代码。我并不是说这是最好的方式:PI目前似乎在编辑帖子时遇到了问题,但你可以在下面看到一个工作示例:嗯,这很好。非常感谢。但我不允许使用jQuery。或者您可以只执行$(source).remove()以避免对另一个映像执行额外的http请求