日期:2014-05-16 浏览次数:20515 次
<img src="http://avatar.profile.csdn.net/0/0/0/2_natici.jpg" alt="正常图片">
<img src="http://avatar.profile.csdn.net/0/0/0/2_natici.jpg" data="http://img4.mypsd.com.cn/20110726/mypsd_63257_201107261606130003b.jpg" alt="正常加载data图片">
<img src="http://avatar.profile.csdn.net/0/0/0/2_natici.jpg" data="http://www.error.com/xxxx.gif" alt="出错,将加载err_url图片">
<script type="text/javascript">
var err_url="http://c.csdn.net/bbs/t/5/i/pic_logo.gif"; //定义出错后显示的图片
var img=document.getElementsByTagName("img");
for(var i=0;i<img.length;i++){
var att=img[i].getAttribute("data");
if(att!=""&&att!=null){
//没有定义data属性的图片我们不检查
(function(a,b){
var pic = new Image();
pic.src = b;
pic.onload = function () {
pic.onload = null;
img[a].src=b;
};
pic.onerror=function(){
pic.onerror = null;
img[a].src=err_url;
}
})(i,att)
}
}
</script>
------解决方案--------------------
<meta charset="utf-8"/>
URL: <input id="url" type="text" />
<input type="button" value="URL" onclick="loadPic()"/><br/>
<img id="pic1" src="" style="display:none;"/>
<script>
var LOADING_URL = 'http://t2.baidu.com/it/u=409863868,1781147496&fm=11&gp=0.jpg';
var ERROR_URL = 'http://img10.3lian.com/c1/ps/32/30/14533113.jpg';
function $(id){
return document.getElementById(id);
}
function getPicLoader(){
if(window.__loader){
return window.__loader;
}
var img = new Image();
window.__loader = img;
return img;
}
function loadPic(){
var loader = getPicLoader();
var url = $('url').value;
var showPic = $('pic1');
showPic.src = LOADING_URL;
showPic.style.display = '';
loader.onload = function(){
showPic.src = this.src;
};
loader.onerror = function(){
showPic.src = ERROR_URL;
};
loader.src = url;
}
</script>