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();
}
现在我们只需要在弹窗的地方加载我们需要的资源了.源码就不贴出来了.如果需要的朋友,或着存在疑问的地方,可以联系我.
分享到:
相关推荐
lazyload, JavaScript, 图片懒加载, h5
LazyLoad 原生 JavaScript 实现的懒加载库,兼容到 IE8
主要介绍了JavaScript实现图片懒加载(Lazyload)的相关资料,需要的朋友可以参考下
1.前言 懒加载技术(简称lazyload)并不是新技术, 它是js程序员对网页性能优化的一种方案.lazyload的核心是按需加载.在大型网站中都有lazyload的身影,例如谷歌的图片搜索页,迅雷首页,淘宝网,QQ空间等.因此掌握lazy...
图片懒加载也是比较常见的一种性能优化的方法,本篇文章主要介绍了原生JS实现图片懒加载(lazyload)实例,这里整理了详细的代码,有需要的小伙伴可以参考下
在上篇文章给大家介绍了JavaScript实现图片懒加载(Lazyload),大家可以参考下。 懒加载的意义(为什么要使用懒加载) 对页面加载速度影响最大的就是图片,一张普通的图片可以达到几M的大小,而代码也许就只有几十KB...
Lazyload图片延迟加载效果,很值得去学习的案例!
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的. 在包含很多...
通用的延迟加载工具LazyLoad,支持下载多个JavaScript文件,并能保证在所有浏览器中都以正确的顺序执行,同时还能加载CSS文件
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的.
实际操作代码,可自行下载测试
图片懒加载,JavaScript插件,很好使用。先加载默认图片,后显示指定图片路径。
An img lazyload for angular directives(基于angular指令的图片懒加载) install:bower install https://github.com/chinakids/ng-LazyLoad.git --save use : angular.module('app',['ngLazyLoad']) ..., <img lazy-...
有兴趣的朋友可以了解一下lazyLoad按需加载源文件,这是关于javascript方面的如果有什么想法可以一起交流一下,本人也是学习当中
hqy-lazyload 一个轻量级的纯JavaScript脚本,用于... hqy-lazyload用纯JavaScript编写,为什么它不依赖于jQuery等第三方库。 hqy-lazyload非常快。 它着重于性能,为什么它在完成延迟加载后也会自动销毁。 hqy-l
#angular-lazyload 关于 基于angular 编写的可复用图片懒加载指令 思路 图片的src不要使用真实地址, 用一个属性保存在元素上 把所有需要使用延迟加载的图片元素放到一个数组中 初始化的时候检查数组中的元素是否在...
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的. 在包含很多...
lazyload 性能更优越的小程序懒加载库 install Usage //page.js import lazyLoad from '../../libs/lazyload'; let lazyload; Page({ data: { img: [] }, onLoad: function () { lazyload = new lazyLoad...