最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
javascript图片预加载技术
时间:2013-07-01 编辑:简简单单 来源:一聚教程网
项目开发中时常需要用 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图片影响,经过反复测试后的最佳处理方式:
代码如下 | 复制代码 |
// 更新: /** // 用来执行队列 // 停止所有定时器队列 return function (url, ready, load, error) { // 如果图片被缓存,则直接返回缓存数据 // 加入队列中定期执行 |
调用方法
代码如下 | 复制代码 |
imgReady('hlogo_cn.png', function () { |
这样性能比第一个要好几十倍,大家不信可测试。
相关文章
- JavaScript imagepool图片加载管理器使用教程 01-02
- 原生javaScript实现图片延时加载效果 12-20
- 再谈javascript图片预加载(lightbox)实现方法 08-18
- javaScript图片预加载后让图片像素变清晰 09-13
- javascript实现真正图片异步加载功能 07-22
- HTML简单购物数量小程序代码展示 10-31