JavaScript的lazyload延迟加载是如何实现的
懒加载技术(简称lazyload)并不是新技术, 它是js程序员对网页性能优化的一种方案.lazyload的核心是按需加载.在大型网站中都有lazyload的身影,例如谷歌的图片搜索页,迅雷首页,淘宝网,QQ空间等.因此掌握lazyload技术是个不错的选择,可惜jquery插件lazy load官网(http://www.appelsiini.net/projects/lazyload)称不支持新版浏览器。
涉及到图片,falsh资源 , iframe, 网页编辑器(类似FCK)等占用较大带宽,且这些模块暂且不在浏览器可视区内,因此可以使用lazyload在适当的时候加载该类资源。避免网页打开时加载过多资源,让用户等待太久。
lazyload的难点在如何在适当的时候加载用户需要的资源(这里用户需要的资源指该资源呈现在浏览器可视区域)。因此我们需要知道几点信息来确定目标是否已呈现在客户区,其中包括:
- 可视区域相对于浏览器顶端位置
- 待加载资源相对于浏览器顶端位置
在得到以上两点数据后,通过如下函数,便可得出某对象是否在浏览器可视区域了。
//返回浏览器的可视区域位置
function getClient(){
var l,t,w,h;
l = document.documentElement.scrollLeft || document.body.scrollLeft;
t = document.documentElement.scrollTop || document.body.scrollTop;
w = document.documentElement.clientWidth;
h = document.documentElement.clientHeight;
return {'left':l,'top':t,'width':w,'height':h} ;
}
//返回待加载资源位置
function getSubClient(p){
var l = 0,t = 0,w,h;
w = p.offsetWidth ;
h = p.offsetHeight;
while(p.offsetParent){
l += p.offsetLeft ;
t += p.offsetTop ;
p = p.offsetParent;
}
return {'left':l,'top':t,'width':w,'height':h } ;
其中函数 getClient()返回浏览器客户区区域信息,getSubClient()返回目标模块区域信息。此时确定目标模块是否出现在客户区实际上是确定如上两个矩形是否相交。
//判断两个矩形是否相交,返回一个布尔值
function intens(rec1,rec2){
var lc1,lc2,tc1,tc2,w1,h1;
lc1 = rec1.left + rec1.width / 2;
lc2 = rec2.left + rec2.width / 2;
tc1 = rec1.top + rec1.height / 2 ;
tc2 = rec2.top + rec2.height / 2 ;
w1 = (rec1.width + rec2.width) / 2 ;
h1 = (rec1.height + rec2.height) / 2;
return Math.abs(lc1 - lc2) < w1 && Math.abs(tc1 - tc2) < h1 ;
}
现在基本上可以实现延时加载了,接下来,我们在 window.onscroll 事件中编写一些代码监控目标区域是否呈现在客户区。
<div style = "width:100px; height:3000px"></div>
<div id = "d1" style = "width:50px; height:50px; background:red;position:absolute; top:1000px">
</div>
var d1 = document.getElementById("d1");
window.onscroll = function(){
var prec1 = getClient();
var prec2 = getSubClient(d1);
if(intens(prec1,prec2)){
alert("true")
}
}
我们只需要在弹出窗口的地方加载我们需要的资源。
这里值得注意的是:目标对象呈现在客户区域时,会随着滚动而不断的弹出窗口。因此我们需要在弹出第一个窗口后取消对该区域的监测,这里用一个数组来收集需要监测的对象。还需要注意:因为onscroll事件和onresize事件都会改变游览器可视区域信息,因此在该类事件触发后需要重新计算目标对象是否在可视区域,这里用autocheck()函数实现。(迅雷首页的lazyload没有在onresize事件中重新计算目标对象是否在浏览器可视区域,因此如果先将浏览器窗口缩小到一定尺寸后滚动到需要加载图片的区域后点击最大化,图片加载不出来,呵呵,以后需要注意了)。
增加元素:<div id = "d2" style = "width:50px; height:50px; background:blue;position:absolute; top:2500px">
//比较某个子区域是否呈现在浏览器区域
function jiance(arr,prec1,callback){
var prec2;
for(var i = arr.length - 1 ; i >= 0 ;i--){
if(arr[i]){
prec2 = getSubClient(arr[i]);
if(intens(prec1,prec2)){
callback(arr[i]);
//加载资源后,删除监测
delete arr[i];
}
}
}
} //检测目标对象是否出现在客户区
function autocheck(){
var prec1 = getClient();
jiance(arr,prec1,function(obj){
//加载资源...
alert(obj.innerHTML)
})
}
//子区域一
var d1 = document.getElementById("d1");
//子区域二
var d2 = document.getElementById("d2");
//需要按需加载区域集合
var arr = [d1,d2];
window.onscroll = function(){
//重新计算
autocheck();
}
window.onresize = function(){
//重新计算
autocheck();
}
现在我们只需要在弹窗的地方加载我们需要的资源了,源码就不贴出来了。
JavaScript的lazyload延迟加载是如何实现的的更多相关文章
- javascript实现图片延迟加载方法汇总(三种方法)
看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,跟着小编一 ...
- jquery lazyload延迟加载技术的实现原理分析_jquery
前言 懒加载技术(简称lazyload)并不是新技术,它是js程序员对网页性能优化的一种方案.lazyload的核心是按需加载.在大型网站中都有lazyload的身影,例如谷歌的图片搜索页,迅雷首页, ...
- javascript,css延迟加载器
/** * js/css LazyLoad * * 变量hash记录已经加载过的资源,避免重复加载 * * Z.loadScript('a.js', function() { ... }) * * Z ...
- JavaScript 中的延迟加载属性模式
传统上,开发人员在 JavaScript 类中为实例中可能需要的任何数据创建属性.对于在构造函数中随时可用的小块数据来说,这不是问题.但是,如果在实例中可用之前需要计算某些数据,您可能不想预先支付该费 ...
- jquery lazyload延迟加载技术的实现原理分析
懒加载技术(简称lazyload)并不是新技术,它是js程序员对网页性能优化的一种方案.lazyload的核心是按需加载.在大型网站中都有lazyload的身影,例如谷歌的图片搜索页,迅雷首页,淘宝网 ...
- 【javascript】如何延迟加载JavaScript(Google推荐的代码)
下面是Google推荐的代码.这些代码应被放置在</body>标签前(接近HTML文件底部)<script type="text/javascript">f ...
- JavaScript有哪些延迟加载的方式?
defer和async,动态创建DOM方式(用得最多),按需异步载入js.
- jquery.lazyload 实现图片延迟加载jquery插件
看到了淘宝产品介绍中,图片是在下拉滚动条时加载,这是一个很不错的用户体验.减少了页面加载的时间了,也减轻了服务器的压力,就查了下用JQuery.. 什么是ImageLazyLoad技术 在页面上图 ...
- JavaScript之延迟加载
本文参阅http://www.appelsiini.net/projects/lazyload Javascript Lazyload延迟加载特效,有效降低HTPP连接次数,提高首屏加载时间 1.增加 ...
随机推荐
- python3 练习题100例 (二十九)猴子吃桃问题
题目内容: 猴子第一天摘下若干个桃子,当即吃了一半,还不过瘾,又多吃了一个第二天早上又将剩下的桃子吃掉一半,又多吃了一个.以后每天早上都吃了前一天剩下的一半零一个.到第n天(<1<n< ...
- HDU1301 Jungle Roads(Kruskal)
Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submission( ...
- urllib,url中链接包含汉字怎么用百分号(%)加密处理
使用urllib中的quote,和unquote方法将汉字编码成gbk(2个百分号对应一个汉字)或者utf8(3个百分号对应一个汉字) 注意用%加密汉字时,汉字不能是Unicode编码格式,否则会报错 ...
- 介绍PHP的自动加载
昨天面试被问到了 PHP 的自动加载机制,因为很多概念模糊啦,没回答好,今天特意来总结一下. include 和 require 是PHP中引入文件的两个基本方法,但是每个脚本的开头,都需要包含(in ...
- Spring常用注解用法总结
转自http://www.cnblogs.com/leskang/p/5445698.html 1.@Controller 在SpringMVC 中,控制器Controller 负责处理由Dispat ...
- ES5新增数组方法(3):some
检查数组元素中是否有元素符合指定. // 数组中的元素部分满足指定条件返回true let arr = [1, 3, 5, 7, 9]; console.log(arr.some((value, in ...
- 虚拟现实-VR-UE4-编译UE4源码
通过Git将UE4源代码获取到本地计算机 切记路径不要有中文 这里面我已经在进行编译了,有部分文件是多余出来的, 第一步就是点击 setup.bat批处理,这个过程回取决与你的网速的快慢,我等了一下午 ...
- 《python核心编程第二版》第8章习题
8–1. 条件语句. 请看下边的代码 # statement Aif x > 0:# statement Bpasselif x < 0:# statement Cpasselse:# s ...
- 可以完成99%的静态页面的HTML标签
HTML:一套浏览器认知的规则HTML分为两个部分,头和身体.一个完整的网页相当于一个裸体的人,我们利用HTML给它穿上衣服,使它更好看.下面我将为大家介绍一下HTML一些基本的标签,而这些基本的标签 ...
- 梳理 Opengl ES 3.0 (二)剖析一个GLSL程序
OpenGL ES shading language 3.0 也被称作 GLSL,是个 C风格的编程语言. Opengl ES 3.0内部有两种可编程处理单元,即Vertex processor和Fr ...