图片加载的事件解决方法

图片加载的事件
请教高手们怎么做以下效果：
1、图片加载前先显示一张加载中的底图，在加载完毕后换成目标图片。
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();
}
[解决办法]
借用用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"/>
[解决办法]

JScript code

<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>
[解决办法]
HTML code
<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>