图片预加载的几个注意点
来源:互联网 发布:stc89c51单片机烧录 编辑:程序博客网 时间:2024/06/05 18:59
1. 应用场景
在制作图片墙,相册这样的单页图片资源比较大的页面时,为了能让用户有流畅的使用体验,需要提前将图片缓存到本地,这就是图片预加载的用途。
2. 原理
提前将图片缓存到本地后,如果图片路径不变,页面在使用图片时,浏览器就可以直接使用缓存了。
具体方法如下:
js有一个Image对象,页面中每有一个标签,就说明有一个image实例。如果想预加载图片,可以提前定义image对象并指定src。
写法一
function imgPreload(url){var img = new Image();img.onload = function(){ alert('img is loaded');};img.onerror = function (){ alert('img loading error!');};img.src = url;}
写法二
function imgPreload(url){var img = new Image();img.src = url;if(img.complete){ alert('img is loaded');}else { img.onload = function (){ alert('img is loaded'); }; img.onerror = function (){ alert('img loading error!'); };}}
下面说一下几个需要注意的地方:
- 方法一必须先绑定onload,后指定src。原因是如果先指定src,可能在还没有给img对象绑定监听器时,图片已经加载完了,这样的话,onload的回调函数将不再执行。如果一定要先指定src的话,可以使用方法二,先判断img的complete属性,如果已经加载完,那么comeplete为true,否则为false。
- onload是事件,complete是状态。(这里说句题外话:绑定事件的方式更适合那种同一个对象触发多次事件的情况(比如click,keyup),并且不在乎绑定事件前是否已经触发过该事件的场景。但本例中只能联合使用onload和complete实现图片预加载)。
- 注意加上onerror事件,因为img不一定能成功加载,如果没有加载成功,可以使用回调函数处理。
补充:预加载gif图有可能多次触发onload事件,在onload事件被触发时,应该清除事件监听,代码如下。
img.onload = function(){ img.onload = null; alert('img is onload');}
0 0
- 图片预加载的几个注意点
- %rowtype的几个注意点
- XHTML的几个注意点
- %rowtype的几个注意点
- %rowtype的几个注意点 .
- 几个重要的注意点
- IOS 加载网络图片注意点
- QSS 加载图片一个注意点
- ue4 输出360全景图片及视频的几个方式对比及注意点
- Fresco 的几个注意的点
- 创建实体化视图的几个注意点
- 读BMP文件的几个注意点
- 使用lucene的几个注意点
- abator使用后的几个注意点
- 创建实体化视图的几个注意点
- ActionScript 3 开发的几个注意点
- DLL使用的几个注意点
- 制作Firefox Plugin的几个注意点
- C#136课的主要内容
- PHP实现的版本号比较
- Ecshop模板开发(十七):商城页面底部帮助信息
- Android如何监听:软键盘显示时:返回键事件
- swustoj字符串查找(0448)
- 图片预加载的几个注意点
- Linux相关命令记录
- ERP安全
- MySQL数据类型
- 单例模式
- spring boot-使用redis的Keyspace Notifications实现定时任务队列
- 24 点游戏
- Linux errno值含义 与 思考(致命与可修正错误类型)
- spring json