怎么在图片加载成功之前用另一个图片代替

很多时候，在服务器上图片有的时候会太大，需要一个小一点的图片来过渡一下。

我想到使用一个onload属性

onload的意思是在这个标签加载完成时，执行onload中的程序

html=html+'<li><img src="img/jiazai.gif" id="loading'+eval(data)[0][3][i]+'" style="height:200px;width:200px"><img id="'+eval(data)[0][3][i]+'"src="picture/'+eval(data)[0][0][i]+'.png" onload="$("#'+eval(data)[0][3][i]+'").show();$("#loading'+eval(data)[0][3][i]+'").hide();" style="display:none;height:200px;width:200px" onclick="imgShow("#outerdiv","#innerdiv","#bigimg","#'+eval(data)[0][3][i]+'")"/><p>'+eval(data)[0][2][i]+'</p></li>';

第一个img是加载成功之前的那张图，第二个img是需要加载的图片，这个img的onload属性，

当加载成功时，显示第二张图，隐藏第一张图

一些loading图片的网址：
http://www.lanrentuku.com/gif/a/loading.html