项目开发中时常需要用 JS 判断一张图片是否加载成功,如果图片加载成功,则执行其相应的 onload 绑定事件,
这个就是我们所说的图片预加载技术,先上最终版代码:
代码如下 | 复制代码 |
function loadImage(url, callback) { var img = new Image(); img.onload = function () { img.onload = null; callback(img); } img.src = url; } |
经测试发现 IE6、IE7、IE8:
如果图片已经存于浏览器缓存中,那么再次对该图片发起请求时,浏览器就会直接从缓存中加载,这样就无法触发其 onload 事件。
而在 IE9、Chrome、FireFox:
无论图片是否存于浏览器缓存中,都会触发其 onload 事件。
所以上述代码中我们先要为 img 绑定 onload 事件,再为其赋值 src 地址!
上面的代码我们还可以进行优化,实际中会有一些兼容陷阱,如width与height检测各个浏览器的不一致,还有webkit new Image()建立的图片会受以处在加载进程中同url图片影响,经过反复测试后的最佳处理方式:
代码如下 | 复制代码 |
// 更新: // 05.27: 1、保证回调执行顺序:error > ready > load;2、回调函数this指向img本身 // 04-02: 1、增加图片完全加载后的回调 2、提高性能 /** // 用来执行队列 // 停止所有定时器队列 return function (url, ready, load, error) { // 如果图片被缓存,则直接返回缓存数据 // 加入队列中定期执行 |
调用方法
代码如下 | 复制代码 |
imgReady('hlogo_cn.png', function () { alert('size ready: width=' + this.width + '; height=' + this.height); }); |
这样性能比第一个要好几十倍,大家不信可测试。