图片onload事件：
1、背景
在写网页时常常遇到一些在图片加载后再进行一些处理操作的情况，一般是把处理操作写在onload事件里。window.onload事件在DOM加载完成之后执行，包括img对象加载完成，所以在window加载完成之后，img对象早已加载完成，所以window.onload触发时，img.onload已经触发。所以处理操作一般写在图片的onload事件里。
2、ie6图片onload事件的bug
ie中如果有缓存图片或者图片地址已经请求过浏览器直接去缓存取图片。浏览器从缓存中取图片的速度（可能会）太快，以致于在其执行到img绑定的onload回调前可能已经加载完成图片。所以img.src放在img.onload前面可能会(注意是可能,而不是一定，个人觉得主要依赖于电脑性能。)导致在ie不执行onload的回调，例子如下：
2.1、加载了缓存不执行回调
<img src = "http://7203804.s21i-7.faiusr.com/2/ABUIABACGAAgj47-rwUo1qLZzQUwwAc4kAM.jpg" />
........其他代码....
<script type="text/javascript">
var img = new Image();
img.src = 'http://7203804.s21i-7.faiusr.com/2/ABUIABACGAAgj47-rwUo1qLZzQUwwAc4kAM.jpg';
img.onload=function () {
alert('img is loaded');
}
</script>
此代码在ie中无弹出，说明未执行回调。
2.2、加载缓存，也能执行回调
<script type="text/javascript">
var img = new Image();
img.src = 'http://7203804.s21i-7.faiusr.com/2/ABUIABACGAAgj47-rwUo1qLZzQUwwAc4kAM.jpg';
img.onload=function () {
alert('img is loaded');
}
img.onerror=function () {
alert('err');
}
window.onload = function () {
alert('body is loaded');
}
</script>
此代码在ie中执行了回调，弹出”img is loaded”。
2.3、img.onload放在img.src赋值前面一定执行回调（虽然也是从缓存中取图片）
<script type="text/javascript">
var img = new Image();
img.onload=function () {
alert('img is loaded');
}
img.src = 'http://7203804.s21i-7.faiusr.com/2/ABUIABACGAAgj47-rwUo1qLZzQUwwAc4kAM.jpg';
</script>
2.4、ie加载gif图片
GIF动态图片是由多张静态图片组合而成，按照一定的顺序和时间进行播放。此gif动态图片可以分解为多张静态图片。
ie加载多帧图片会反复触发onload事件。
<script type="text/javascript">
var img = new Image();
img.src = 'http://tu.sioe.cn/gj/fenjie/image.gif';
img.onload=function () {
alert('img is loaded');
}
img.onerror=function () {
alert('err');
}
window.onload = function () {
alert('body is loaded');
}
</script>
此代码在ie6下反复弹出”img is loaded”,而在chrome中只弹出一次”img is loaded”.
3、兼容性图片onload事件写法
以下是兼容性的在图片加载成功之后进行回调的代码：
<script type="text/javascript">
function loadImage(url, callback, ret) {
var img = new Image(); // 创建一个Image对象，实现图片的预下载
img.onload = function () { // 图片下载完毕时异步调用callback函数。
img.onload = null;//针对ie的gif图片加载bug(ie加载多帧图片会反复触发onload事件)
callback.call(img, ret); // 将回调函数的this替换为Image对象
};
img.src = url;
if (img.complete) {
callback.call(img, ret);
return; // 直接返回，不用再处理onload事件
}
}
</script>