图片预加载

本文介绍了一种名为懒加载的技术,该技术能够实现在浏览器可视区域外的图片延迟加载,直至用户将页面滚动到图片位置时才开始加载。这种方式有助于提高网页加载速度并节省服务器带宽。文中提供了一个具体的 JavaScript 实现示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

[url]http://www.cnblogs.com/comdeng/archive/2008/06/15/Preload_Image.html[/url]


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对象
};
};



function imgLoaded(){
alert(this.width);
}
<input type="button" value="loadImage" onclick="loadImage('aaa.jpg',imgLoaded)"/>



[b]Lazy loader[/b]方式在一些图片非常多的网站中非常有用,在浏览器可视区域外的图片不会被载入,直到用户将页面滚动到它们所在的位置才加载,这样对于含有很多图片的比较长的网页来说,可以加载的更快,并且还能节省服务器带宽。jQuery插件中也有插件来实现该功能。
在腾讯的QQ空间和微博中就采用这样技术实现,在大访问量的网站,这样就相对可以减少服务器的压力,在用户访问到所见区域和下面内容时候才去请求。而不是传统的一次把整个页面下载过来,在下载过程中存在着用户等待内容呈现
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值