“一张图胜过千言万语”,可见图片的作用是非常强大的。而在互联网上图片的访问量也在与日俱增,为了更好的应对需求,更好的服务别人,所以有了图片预加载。
亮点:
• 图片预载入,载入后再显示。意图一次呈现,不会让一块一块下载破坏你的页面,绝佳的用户体验,颠覆传统的浏览器呈现图片的处理方式。
• 当需要重复浏览图片时,可以迅速将其从缓存中恢复回来。
通过调用preLoadImg函数,传入图片的url,就能使图片预先下载下来了。但是需要考虑到,在做图片浏览器功能时,图片都是实时显示的。比如你点了显示的按钮,这 个时候才会调用上边类似的代码来加载图片。因此,如果你直接用img.width的时候,图片还没有完全下载下来。因此,需要用异步的方法,等到图片下载完毕的时候才会再对img的width和height进行调用(能够显示width和height属性值,说明图片已经下载完毕)。
异步onload
实现这样的异步方法实际上不难,图片下载完毕后所要做的事,可以通过简单的onload事件完成。因此,我们可以写出下面的代码:
好了,来写一个测试用例。
function imgLoaded(){
alert(this.width);
}
当图片加载过一次以后,如果再有对该图片的请求时,由于浏览器已经缓存住这张图片了,不会再发起一次新的请求,而是直接从缓存中加载过来。
经过测试发现,Firefox默认使用了缓存机制,而IE和Google没有使用缓存机制。
亮点:
• 图片预载入,载入后再显示。意图一次呈现,不会让一块一块下载破坏你的页面,绝佳的用户体验,颠覆传统的浏览器呈现图片的处理方式。
• 当需要重复浏览图片时,可以迅速将其从缓存中恢复回来。
function preLoadImg(url) {
var img = new Image();
img.src = url;
}
通过调用preLoadImg函数,传入图片的url,就能使图片预先下载下来了。但是需要考虑到,在做图片浏览器功能时,图片都是实时显示的。比如你点了显示的按钮,这 个时候才会调用上边类似的代码来加载图片。因此,如果你直接用img.width的时候,图片还没有完全下载下来。因此,需要用异步的方法,等到图片下载完毕的时候才会再对img的width和height进行调用(能够显示width和height属性值,说明图片已经下载完毕)。
异步onload
实现这样的异步方法实际上不难,图片下载完毕后所要做的事,可以通过简单的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);
}
<input type="button" value="loadImage" οnclick="loadImage('aaa.jpg',imgLoaded)"/>
当图片加载过一次以后,如果再有对该图片的请求时,由于浏览器已经缓存住这张图片了,不会再发起一次新的请求,而是直接从缓存中加载过来。
function loadImage(url, callback) {
var img = new Image(); //创建一个Image对象,实现图片的预下载
img.src = url;
if (img.complete) { // 如果图片已经存在于浏览器缓存,直接调用回调函数
alert("使用缓存");
callback.call(img);
return; // 直接返回,不用再处理onload事件
}
img.onload = function () { //图片下载完毕时异步调用callback函数。
callback.call(img);//将回调函数的this替换为Image对象
};
};
经过测试发现,Firefox默认使用了缓存机制,而IE和Google没有使用缓存机制。