javascript图片预加载(2)
作者:heroguang 来源:heroguang的日志 发布时间:2009-08-30 12:47:00
不过,做到这一步,先别高兴太早——还需要考虑一下浏览器的兼容性,于是,赶紧到ie里边测试一下。没错,同样弹出了图片的宽度。但是,再点击load的时候,情况就不一样了,什么反应都没有了。刷新一下,也同样如此。
经过对多个浏览器版本的测试,发现ie6、opera都会这样,而firefox和safari则表现正常。其实,原因也挺简单的,就是因为浏览器的缓存了。当图片加载过一次以后,如果再有对该图片的请求时,由于浏览器已经缓存住这张图片了,不会再发起一次新的请求,而是直接从缓存中加载过来。对于 firefox和safari,它们视图使这两种加载方式对用户透明,同样会引起图片的onload事件,而ie和opera则忽略了这种同一性,不会引起图片的onload事件,因此上边的代码在它们里边不能得以实现效果。
怎么办呢?最好的情况是Image可以有一个状态值表明它是否已经载入成功了。从缓存加载的时候,因为不需要等待,这个状态值就直接是表明已经下载了,而从http请求加载时,因为需要等待下载,这个值显示为未完成。这样的话,就可以搞定了。
经过一些分析,终于发现一个为各个浏览器所兼容的Image的属性——complete。所以,在图片onload事件之前先对这个值做一下判断即可。最后,代码变成如下的样子:
function loadImage(url, callback) {
var img = new Image(); //创建一个Image对象,实现图片的预下载
img.src = url;
if (img.complete) { // 如果图片已经存在于浏览器缓存,直接调用回调函数
callback.call(img);
return; // 直接返回,不用再处理onload事件
}
img.onload = function () { //图片下载完毕时异步调用callback函数。
callback.call(img);//将回调函数的this替换为Image对象
};
};
经过这么一番折腾,总算是让各个浏览器都能满足我们的目标了。虽然代码很简单,但是却把图片浏览器中最核心的问题解决掉了,接下来你所要做的,仅仅是图片如何呈现的问题了。
猜你喜欢
- 这个符合设计标准的三 级向上弹出菜单,纯css代码控制,没有使用javascript脚本,绿色环保,呵呵。兼容性应该更好。截图:<!D
- 介绍:细处着手,巧处用功。高手和菜鸟之间的差别就是:高手什么都知道,菜鸟知道一些。电脑小技巧收集最新奇招高招,让你轻松踏上高手之路。 摘 要
- aspImage是ServerObjects站点上非常好的一个组件,它可以使我们利用Asp实现很多对于图形的处理功能,他的功能强大,如果你需
- Web Accessibility Initiative Accessible Rich Internet Applications认识AR
- <% Rem Rem ## 在线升级类声明 Class Cls_oUpdate
- 这两个字符串真实长度和取固定长度的字符串函数是在 photo.163.com 的js文件里看到的。 作者&nb
- 实现一个AuditLog的功能,是B/S结构专案。 每个用户可以登录系统,在程序中操作数据(添加,更新和删除)需要实现记录操作跟踪。是谁添加
- 本文试图从iPhone的角度结合一些iPhone平台项目的设计经验提炼出iPhone平台的一些优秀设计思路,以供大家在做移动互联网设备设计时
- 照例使用XMLhttp同步方式获取数据,可是由于网络不稳定,经常造成'死锁'状况,既send之后一直不返回服务器结果,也不出
- 在Flash中使用ASP需要的条件:1。你的ISP的server必须支持Active Server Pages并且最好支持数据库2。你应该要
- 游标的使用提到游标这个词,人们想到的是在屏幕上一个闪动的方框,用以指示用户将要输入字符的位置。而在关系型数据库的SQL语言中,游标却有另外的
- 昨天Steve的 讲座涉及了一个我从没考虑的领域,在没法优化后台服务器的时候,如何合理的放置网页的元件让她们在浏览器里显示得更加快。这里,我
- 一.雅黑设计理念 雅黑字体是为微软公司设计的屏幕显示汉字。它具有个性独特、结体优美、识别性强、块状效果好、显示清晰等优点。在当今数字化时代更
- 代码如下:<% Function Bytes2bStr(vin,cSet) Dim BytesStream,StringReturn
- 作者:AngelGavin 出处:CSDNInternet Explorer 5.0 对 XML 提供哪个级别的支持?Inter
- 在SQL中,很多威力都来自于将几个表或查询中的信息联接起来,并将结果显示为单个逻辑记录集的能力。在这种联接中包括INNER、LEFT、RIG
- 各位大哥: 在javascript中如何取整?比如: var
- 隐藏并修改文件的最后修改时间的asp-webshell。源码:<% '隐藏并修改文件的最后修改时间的aspshell '
- 在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗的解决方法分享。<div id='tes
- 一个不错的文字放大特性源码。效果图:运行代码框<script for=document event=onmousemove>//