图片失效了之后,显示一个红叉叉,实在难看,一般的做法是现实一个默认的图片,比如提示用户“图片已经找不到”等等。
我试了一下,用下面这个可以实现
但是每个图片都加上这个显然不合适,那么用js实现。
我这里获取该页的全部图片了,实际操作中只有用户上传的图片才会失效,网站本身的图片一般不会。所以图片dom的时候可以适当限制一下条件,节省不必要的资源浪费。
-----------------------------------------------
缺点是,如果有失效的链接,能转到默认的图片是不错,但是感觉还是闪了一下(显示红叉叉,然后再加载默认图片),怎么避免呢?
我试了一下,用下面这个可以实现
<img src="111.jpg" onerror="this.src='http://www.iteye.com/images/smiles/icon_biggrin.gif'" />
但是每个图片都加上这个显然不合适,那么用js实现。
我这里获取该页的全部图片了,实际操作中只有用户上传的图片才会失效,网站本身的图片一般不会。所以图片dom的时候可以适当限制一下条件,节省不必要的资源浪费。
window.onload = function(){
var imgs = document.getElementsByTagName("img");
for(var i=0; i< imgs.length; i++){
imgs[i].onerror = function(){
this.src='http://www.baidu.com/img/baidu_logo.gif';
}
}
}
-----------------------------------------------
缺点是,如果有失效的链接,能转到默认的图片是不错,但是感觉还是闪了一下(显示红叉叉,然后再加载默认图片),怎么避免呢?
本文介绍了一种处理网页中图片加载失败的方法,通过JavaScript为所有图片元素添加错误监听事件,当图片无法加载时替换为默认图片,同时探讨了如何优化用户体验。
348

被折叠的 条评论
为什么被折叠?



