图片加载的事件

Question

请教高手们怎么做以下效果：
1、图片加载前先显示一张加载中的底图，在加载完毕后换成目标图片。
2、当目标图片不存在、加载失败时，显示本地的指定图片。

Answer 1

首先放一张图片在那里  然后对文档绑定load事件，在load事件里面替换图片路径

Answer 2

function replaceImg() {
var img = document.getElementsByTagName("img")[0];
img.removeAttribute("src");
img.setAttribute("src","sites/skins/default/images/a.jpg");
}
window.onload = function() {
replaceImg();
}

Answer 3

你只做了我的第一点，第二点呢？当sites/skins/default/images/a.jpg 不存在时，指向本地的一张图片，这一步怎么做？

Answer 4

使用onerror="alert('ddd')"去捕捉
<img src="1sss.gif" onerror="alert('ddd')" id="img2"/>

Answer 5

按照你的思路我测试过，会产生死循环。
具体产生死循环条件如下：<img src="1.jpg" onload="2.jpg" onerror="error.jpg" />
当图片第一次加载时，2.jpg若不存在，那么会正确显示error.jpg。但当我隐藏img再显示时，会触发onload和onerror的死循环，图片会不断消失又显示error.jpg，然后又消失又显示error.jpg。奇怪得很，我看网络流量也是在不断的产生。如果不触发这个死循环，那么网络不会一直产生流量的。

Answer 6

借用用1楼那个懒人的代码
<script type="text/javascript">
function replaceImg() {
    var img = document.getElementById("img2");
    img.setAttribute("src","sites/skins/default/images/a.jpg");//先尝试加载这张图片
    img.onerror=function(){
        img.setAttribute("src","1.gif");//如果上面的图片不存在，则替换成这张
    }
}
window.onload = function() {
    replaceImg();//onload事件能保证页面中所有元素均已经加载完成
}</script>
<img src="2.gif" id="img2"/>

Answer 7

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

Answer 8

var img = new Image();
img.onload = function(){};//加载成功的图片
img.src  ="";// 默认图片
img.onerror = function(){};错误图片

Answer 9

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