实现javascript懒加载技术代码

 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 事故中撰写一些编码监管目标区域是不是展现在客户区.


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事故中重算目标用户是不是用浏览器可视性地区,所以如果先把浏览器窗口降低到一定大小后翻转到有上传图片的地区然后点击更大化，图片加载不出来了，呵呵呵，之后需要注意了).


　　提升原素: