最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
js中window.onload事件实现图片预加载
时间:2014-06-13 编辑:简简单单 来源:一聚教程网
做过图片翻转效果的朋友其实都知道,要让图片轮换的时候不出现等待,最好是先让 图片下载到本地,让浏览器缓存起来。这时,一般都会用到js里边的Image对象。一般的手段无非这样:
代码如下 | 复制代码 |
function preLoadImg(url) { var img = new Image(); img.src = url; } |
通过调用preLoadImg函数,传入图片的url,就能使图片预先下载下来了。
实际上,这里用到的预下载功能也和这基本一致。图片预下载下来后,通过 img的width和height属性,就能知道图片的宽和高了。但是需要考虑到,在做图片浏览器功能时,图片都是实时显示的。比如你点了显示的按钮,这 个时候才会调用上边类似的代码来加载图片。因此,如果你直接用img,width的时候,图片还没有完全下载下来。
因此,需要用一些异步的方法,等到图片 下载完毕的时候才会再对img的width和height进行调用。实现这样的异步方法实际上不难,图片的下载完毕事件也很简单,就是简单的onload事件。因此,我们可以写出下面的代码:
代码如下 | 复制代码 |
function loadImage(url, callback) { var img = new Image(); img.src = url; img.onload = function() { //图片下载完毕时异步调用callback函数。 callback.call(img);// 将callback函数this指针切换为img。 }; } |
好了,再来写一个测试用例。
代码如下 | 复制代码 |
function imgLoaded(){ alert(this.width); } |
在firefox中测试一下,发现不错,果然和预想的效果一样,在图片下载后,就会弹出图片的宽度来。无论点击多少次或者刷新结果都一样。不过,做到这一步,先别高兴太早——还需要考虑一下浏览器的兼容性,于是,赶紧到ie里边测试一下。没错,同样弹出了图片的宽度。但是,再点击 load的时候,情况就不一样了,什么反应都没有了。刷新一下,也同样如此。经过对多个浏览器版本的测试,发现ie6、opera都会这样,而firefox和safari则表现正常。
其实,原因也挺简单的,就是因为浏览器 的缓存了。当图片加载过一次以后,如果再有对该图片的请求时,由于浏览器已经缓存住这张图片了,不会再发起一次新的请求,而是直接从缓存中加载过来。对于 firefox和safari,它们视图使这两种加载方式对用户透明,同样会引起图片的onload事件,而ie和opera则忽略了这种同一性,不会引 起图片的onload事件,因此上边的代码在它们里边不能得以实现效果。怎么办呢?最好的情况是Image可以有一个状态值表明它是否已经载入成功了。从缓存加载的时候,因为不需要等待,这个状态值就直接是表明已经下载 了,而从http请求加载时,因为需要等待下载,这个值显示为未完成。这样的话,就可以搞定了。经过一些分析,终于发现一个为各个浏览器所兼容的Image的属性——complete。所以,在图片onload事件之前先对这个值做一下判断即 可。
最后,代码变成如下的样子:
代码如下 | 复制代码 |
function loadImage(url, callback) if (img.complete) |
经过这么一番折腾,总算是让各个浏览器都能满足我们的目标了。虽然代码很简单,但是却把图片浏览器中最核心的问题解决掉了,接下来你所要做的,仅仅是图片 如何呈现的问题了。
-
上一个: jquery 判断图片加载完毕例子
相关文章
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31
- html使用表单标签实现注册页面代码展示 10-31
- 使用HTML截图并保存为本地图片的代码展示 10-31