javascript 懒加载技术(lazyload)简单实现

1.前言
　　懒加载技术(简称lazyload)并不是新技术, 它是js程序员对网页性能优化的一种方案.lazyload的核心是按需加载.在大型网站中都有lazyload的身影,例如谷歌的图片搜索页,迅雷首页，淘宝网,QQ空间等.因此掌握lazyload技术是个不错的选择,可惜jquery插件lazy load官网(http://www.appelsiini.net/projects/lazyload)称不支持新版浏览器。

2.lazyload在什么场合中应用比较合适?
　　涉及到图片，falsh资源 , iframe, 网页编辑器(类似FCK)等占用较大带宽，且这些模块暂且不在浏览器可视区内,因此可以使用lazyload在适当的时候加载该类资源.避免网页打开时加载过多资源，让用户等待太久.

3.如何实现lazyload?
　　lazyload的难点在如何在适当的时候加载用户需要的资源(这里用户需要的资源指该资源呈现在浏览器可视区域)。因此我们需要知道几点信息来确定目标是否已呈现在客户区,其中包括：
　　　　1.可视区域相对于浏览器顶端位置
　　　　2.待加载资源相对于浏览器顶端位置.

　　在得到以上两点数据后，通过如下函数，便可得出某对象是否在浏览器可视区域了.
　　//返回浏览器的可视区域位置
　　 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();
　　}

　　现在我们只需要在弹窗的地方加载我们需要的资源了.源码就不贴出来了.如果需要的朋友,或着存在疑问的地方,可以联系我.

[原文：http://www.cnblogs.com/a_bu/archive/2011/01/16/1936989.html]

javascript 懒加载技术(lazyload)简单实现相关推荐

“懒”的妙用——浅析图片懒加载技术
1.定义图片懒加载是一种网页优化技术.图片作为一种网络资源,在被请求时也与普通静态资源一样,将占用网络资源,而一次性将整个页面的所有图片加载完,将大大增加页面的首屏加载时间.为了解决这种问题,通过前 ...
Python：图片懒加载技术
一. 案例分析:抓取站长素材http://sc.chinaz.com/中的图片数据 #!/usr/bin/env python # -*- coding:utf-8 -*- import reques ...
Python网络爬虫之图片懒加载技术、selenium和PhantomJS
引入今日概要图片懒加载 selenium phantomJs 谷歌无头浏览器知识点回顾验证码处理流程今日详情动态数据加载处理一.图片懒加载什么是图片懒加载? 案例分析:抓取站长素材ht ...
vue“路由懒加载” 技术，让网页快速加载（优化篇）
(含代码示例.截图演示)让中大型vue项目,按需加载文件,让网页快速渲染! 官方文档:路与懒加载所谓的路由懒加载: 代码示例 · 对比: 1. 没有优化的代码(截图1 · 省略) import Vu ...
图片懒加载解决方案 lazyload.js
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
php ajax 懒加载demo,lazyload懒加载，怎么支持ajax获得的新内容？
lazyload懒加载,怎么支持ajax获得的新内容? 现在问题是: 1.老的内容已经$("img.lazy").lazyload({effect: "fadeIn&qu ...
html如何实现页面懒加载,浏览器HTML自带懒加载技术
对于目前的图浏.富混工就划这些本公的响示近览记的迹更片懒加载,我们一般采用的是通过第三方库或懒加载库来实现,但是该方式的显著问题就是,必须按插者几天网后供小来剑思含程个些结十在必页到别则气底.时效器按 ...
html 语音懒加载,浏览器HTML自带懒加载技术
对于目前的图片懒加载,我们一般采用的是通过第三方库或懒加载库来实现,但是该方式的显著问题就是,必须按顺序执行: 1.加载初始的 HTML 响应内容 2.加载懒加载库 3.加载图片假如浏览器能直接支持 ...
移动端图片居多，加载过慢，使用延迟加载|懒加载（ lazyload.js）
文章目录[隐藏] Lazy Load 插件原理开始使用 lazyload.js lazyload.js 高级使用方法: 更周全的做法提前加载自定义触发事件自定义显示效果把图像插入某个容器加 ...

javascript 懒加载技术(lazyload)简单实现

javascript 懒加载技术(lazyload)简单实现相关推荐

最新文章

热门文章