首页 / JAVASCRIPT / LazyLoad 延迟加载(按需加载)

LazyLoad 延迟加载(按需加载)

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了LazyLoad 延迟加载(按需加载)，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含10163字，纯文字阅读大概需要15分钟。

内容图文

1：实际需求
　　大型网站往往很矛盾，想用户在首页看到更多东西，又不想浪费太多服务器流量。比如一个有3屏的首页。可能50%的用户进首页的目的是点击首页的连接，到子页面。
那么我们的网站却为100%的用户加载了 3个屏幕的所有内容。如果可以按需加载内容。就可以节约更多资源，做更多好的应用。

2：解决方案
　　用客户端语言来判断用户当前的可视范围，只加载用户可视范围的内容。最主要的是图片。因为文字信息，相对较小，其他多媒体内容相对占用服务器流量更多。
3：演示例子(最后提供)
4：解析
　　首先我们要分析下，这个效果会有一个最外面的容器。他包涵了里面需要延迟加载一些内容。容器一般可能是浏览器窗口本身(window)，或者一个有滚动条的DIV。
OK，我们必须获取这个容器的一些参数。比如可视宽度，可视高度，水平卷去宽度，垂直卷去高度。我使用下面的程序。
　　4.1：获取容器对象属性

代码如下:


_this.docInfo=function(){//获取容器的相关信息 
var d={},db= (wf)? document.body : warpper, 
dd=(wf) ? document.documentElement : warpper; 
if(sys.ie){ 
d.offh=dd.offsetHeight;//可视区域H 
d.offw=dd.offsetWidth;//可视区域W 
}else{ 
if(wf){ 
d.offw=window.innerWidth;//可视区域H 
d.offh=window.innerHeight;//可视区域W 
}else{ 
d.offh=dd.offsetHeight;//可视区域H 
d.offw=dd.offsetWidth;//可视区域W 
} 
} 
d.jtop=(wf) ? db.scrollTop+dd.scrollTop : db.scrollTop ;//垂直卷去高度 
d.jleft=(wf) ? db.scrollLeft+dd.scrollLeft : db.scrollLeft;//水平卷去宽度 
//被卷去的宽度 window 使用两个相加 div的卷曲就直接使用scrollLeft就OK 
$j("bbb").innerHTML=d.offh+','+d.offw+','+d.jtop+','+d.jleft 
return d; 
} 
//注意在非IE 浏览器下 获取非window对象的可视区域 使用offsetHeight 和 offsetWidth （跟IE 一样） 
//在非IE 下获取 window对象的可视区域 则要使用 window.innerWidth 和window.innerHeight 
//也就是说在非IE 下的 window 和 非window 对象的 可视区域获取是不一样的。 
 

　　4.2:获取加载内容的信息 
　　　　我们主要获取加载对象距离 页面容器对象的距离 。 
IE 6 7会有个BUG 
 代码如下:
wtop=sys.ie ? (sys.ie[1]=='6.0' || sys.ie[1]=='7.0') ? 0 : warpper.offsetTop : warpper.offsetTop, 
wleft=sys.ie ? (sys.ie[1]=='6.0' || sys.ie[1]=='7.0') ? 0 : warpper.offsetLeft : warpper.offsetLeft,

 代码如下:
getoff=function(o){//获取IMG对象的 offw and offh 
o.innerHTML=(o.offsetTop-wtop) +','+ (o.offsetLeft-wleft); 
return (o.offsetTop-wtop) +','+ (o.offsetLeft-wleft); 
//注意 o.offsetTop 在chrome下要等window.onload以后才能正确获取 
}; 
 
　　4.3:加载主程序 
　　　　他主要负责加载当前在可视范围内对象。那么我们必须去遍历所有要加载的对象。判断对象是否在当前的加载中。 
然后加载他。我下面会有一个图。（方法可能不太好） 
 代码如下:
_this.Load=function(){ 
var hereline=[]; 
hereline[1]=doc.offh+doc.jtop; 
hereline[2]=doc.offw+doc.jleft; 
for(i=0;i<imgs.length;i++){ 
if(imgs[i][1] != undefined){//判断当前对象是否已经加载过 
var jj=hereline[1] - imgs[i][1] < doc.offh +130 && hereline[1] - imgs[i][1] > 0 ? true : false, 
jjj=hereline[2] - imgs[i][2] < doc.offw +270 && hereline[2] - imgs[i][2] > 0 ? true : false; 
if(jj && jjj){ 
imgall[i].innerHTML+='第'+(++j)+'个加载'; 
imgs[i][1]=undefined; 
} 
} 
} 
if( j >= imgs.length){//判断是否已经全部加载完毕 
//取消时间绑定 
alert("已经全部加载完成，程序将不再执行") 
warpper.onscroll=null; 
warpper.onresize=null; 
} 
} 
 
我不太喜欢我的判断程序，但是暂时没找到，或者我没理解更好的算法。所以就先用这个了。 
大体的意思：用容器的可视高度+容器滚动高度 - 对象距离距离容器距离 > 容器可视 + 对象本身高或宽 就证明在加载范围。（绕口令） 
我们还必须把 已经加载过的对象排除在外。因为加载过的对象也满足以上公式，同时也可以少判断一些。 
imgs[i][1]=undefined; 
if(imgs[i][1] != undefined){//判断当前对象是否已经加载过 
　　特别注意（看图） 

看上图 A B C D。 分别有4个不同的角露在了 可视范围内。所以这4个对象是需要加载的。 

如果只考虑对象的某个点，或者某个线来判断对象是否在可视范围，可能带来不好的体验。 

由于有上面这种情况，也给我们的编程（判断是否在可视范围内）增加了难度。 

我上面的方法，是可以完成了。（如果有发现BUG ，请给我指点。其实我也有点晕了。） 



最后还有几个技巧，比如 

　　1：对象全部加载完了。就应该去掉容器对象事件触发。 

　　2：尽量优化判断对象是否在可视范围，或者遍历的对象的算法。可以节约很多浏览器资源。 

　　3：cloudgamer 还提到一个 延迟触发，就是快速的滑动滚动条，延迟一下也是一个小的优化。 

5：推荐文章 

　　cloudgamer 的 他讲的很详细，也比我做的要好。所以推荐去学习他的这个效果哦。很多东西我也借鉴他的。 

还有就是感谢他的指点。 Lazyload 延迟加载效果
6:我的源码 
 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>lazyload</title> 
</head> 
<body> 
<style type="text/css"> 
body{ margin:0px; padding:0; font-size:12px;} 
.jelle_box{width:270px; height:129px; border:1px solid #CCC; float:left;} 
</style> 
<input type="button" value="重新开始" onclick="lazyload().judge();" /> 
<div style="width:100%; height:500px; overflow:scroll; border:2px solid #999;" id="jelle_abcd"> 
<div id="aaa" style="width:2500px; height:800px; margin:10px;"> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
<div class="jelle_box"></div> 
</div> 
</div> 
<div style=" height:30px" id="bbb"></div> 
<script type="text/javascript"> 
(function(){ 
window.lazyload=function(){ 
var _this={},//方法集合 
imgsurl=['baidu_logo_2.gif']//最开始是用来加载图片的。这里是需要加载图片的地址集合 
imgs=[],//全部IMG 数据 格式为 [[url,offw,offh],[url,offw,offh]] 
i=0,//循环变量 
j=0,//判断当前的加载个数 
warpper=document.getElementById('jelle_abcd'),//window,//容器对象 
wf=(warpper==window) ? true : false; 
doc={offw:0,offh:0,jtop:0,jleft:0},//包含一些 容器对象当前的一些属性 
sys=(function(){//不必紧张这只是一个判断浏览器的函数,你可以使用很多方法来判断浏览器 
var ua=navigator.userAgent.toLowerCase(),sys={}; 
sys.firefox=ua.match(/firefox\/([\d\.]+)/); 
sys.ie=ua.match(/msie\s([\d\.]+)/); 
sys.chrome=ua.match(/chrome\/([\d\.]+)/); 
return sys; 
})(), 
$j=function(id){return document.getElementById(id);}, 
imgall=$j('aaa').getElementsByTagName('DIV'), 
getoff=function(o){//获取IMG对象的 offw and offh 
//alert(o.width) 
o.innerHTML=(o.offsetTop-warpper.offsetTop) +','+ (o.offsetLeft-warpper.offsetLeft); 
return (o.offsetTop-warpper.offsetTop) +','+ (o.offsetLeft-warpper.offsetLeft); 
//注意 o.offsetTop 在chrome下要等window.onload以后才能正确获取 
}; 
//o.offsetTop获取对象距离浏览器顶部的距离 必须减去外面容器的距离浏览器的距离。（如果使用window容器就不用了） 
(function(){//初始化容器对象绑定事件== 
if(wf){ 
window.onscroll=function(){_this.judge();}; 
window.onresize=function(){_this.judge();}; 
}else{ 
warpper.onscroll=function(){_this.judge();} 
warpper.onresize=function(){_this.judge();} 
} 
window.onload=function(){setTimeout(_this.judge,500);}; 
})() 
//容器对象设置结束 
for( i ; i<imgall.length ; i++ ){//初始化imgs 数组 
var arr=[],off; 
off=getoff(imgall[i]); 
//alert(off) 
arr.push(imgsurl[0]); 
arr.push((off.split(',')[0])); 
arr.push((off.split(',')[1])); 
imgs.push(arr); 
} 
_this.Load=function(){ 
var hereline=[]; 
hereline[1]=doc.offh+doc.jtop; 
hereline[2]=doc.offw+doc.jleft; 
for(i=0;i<imgs.length;i++){ 
if(imgs[i][1] != undefined){//判断当前对象是否已经加载过 
var jj=hereline[1] - imgs[i][1] < doc.offh +130 && hereline[1] - imgs[i][1] > 0 ? true : false, 
jjj=hereline[2] - imgs[i][2] < doc.offw +270 && hereline[2] - imgs[i][2] > 0 ? true : false; 
if(jj && jjj){ 
imgall[i].innerHTML+='第'+(++j)+'个加载'; 
imgs[i][1]=undefined; 
} 
} 
} 
if( j >= imgs.length){//判断是否已经全部加载完毕 
//取消时间绑定 
alert("已经全部加载完成，程序将不再执行") 
warpper.onscroll=null; 
warpper.onresize=null; 
} 
} 
_this.docInfo=function(){//获取容器的相关信息 
var d={},db= (wf)? document.body : warpper, 
dd=(wf) ? document.documentElement : warpper; 
if(sys.ie){ 
d.offh=dd.offsetHeight;//可视区域H 
d.offw=dd.offsetWidth;//可视区域W 
}else{ 
if(wf){ 
d.offw=window.innerWidth;//可视区域H 
d.offh=window.innerHeight;//可视区域W 
}else{ 
d.offh=dd.offsetHeight;//可视区域H 
d.offw=dd.offsetWidth;//可视区域W 
} 
} 
d.jtop=(wf) ? db.scrollTop+dd.scrollTop : db.scrollTop ;//垂直卷去高度 
d.jleft=(wf) ? db.scrollLeft+dd.scrollLeft : db.scrollLeft;//水平卷去宽度 
//被卷去的宽度 window 使用两个相加 div的卷曲就直接使用scrollLeft就OK 
$j("bbb").innerHTML=d.offh+','+d.offw+','+d.jtop+','+d.jleft 
return d; 
} 
//注意在非IE 浏览器下 获取非window对象的可视区域 使用offsetHeight 和 offsetWidth （跟IE 一样） 
//在非IE 下获取 window对象的可视区域 则要使用 window.innerWidth 和window.innerHeight 
//也就是说在非IE 下的 window 和 非window 对象的 可视区域获取是不一样的。 
_this.judge=function(){//后来发现不用判断方向了 
var d=_this.docInfo(); 
if( d.jtop != doc.jtop || d.jleft != doc.jleft || d.offw > doc.offw || d.offh > doc.offh){ 
//判断是否需要执行加载 
//条件为 被卷去的 y x 变化 或者 窗口大小 发生变化触发 
doc.jtop = d.jtop; 
doc.offh = d.offh; 
doc.jleft = d.jleft; 
doc.offw = d.offw; 
_this.Load();//加载程序 
} 
} 
//setTimeout(_this.judge,500);//执行初始化加载 
//setTimeout 防止onload 和 onscroll的重复执行 
//也就是本来就有onscroll的时候 最先执行了onload 
return _this; 
} 
})() 
lazyload(); 
</script> 
</body> 
</html>

内容总结

以上是互联网集市为您收集整理的LazyLoad 延迟加载(按需加载)全部内容，希望文章能够帮你解决LazyLoad 延迟加载(按需加载)所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/371162.html

来源：【匿名】

【上一篇】mysql输出数据赋给js变量报unterminated string literal错误原因【下一篇】javascript 怎么调用php方法

更多 ►

【LazyLoad 延迟加载(按需加载)】教程文章相关的互联网学习教程文章

javascript-问一个jquery.lazyload的问题

我们知道要使用jquery.lazyload需要把图片路径放在data-original那么，我的网站已经建立几个月，如果要一个一个文章的去修改，似乎是一件挺麻烦的事情。有没有什么方法可以直接修改网站的img标签呢？比如用jquery之类的希望有大神解决回复内容：我们知道要使用jquery.lazyload需要把图片路径放在data-original那么，我的网站已经建立几个月，如果要一个一个文章的去修改，似乎是一件挺麻烦的事情。有没有什么方法可以直接修改网...

javascript-有个文章中图片的懒加载lazyload.js的疑问？【图】

有个文章中图片的懒加载lazyload.js的疑问？修改目标img元素的src属性为orginal属性，从而中断图片的加载。 lazyloa的使用需要这样啊，需要增加一个orginal属性指向原图啊，那我文章中的图片，岂不是需要在服务器端用正则处理一下吗，这多麻烦啊！！！ lazyloa为什么不能在浏览器加载图片之前把图片“收为囊中”阻断浏览器自动加载图片吗？ js不是有个页面加载完毕（html加载完毕，但资源没开始加载的事件吗？好像是onreadystatec...

在vue-lazyload中使用图片延迟加载插件【图】

下面我就为大家分享一篇vue-lazyload图片延迟加载插件的实例讲解，具有很好的参考价值，希望对大家有所帮助。1、首先在npm上下载vue-lazyload的引用包npm install vue-lazyload --save-dev2、然后我们在main.js里面import这个包，当然，单单这一个包是不够的，还得其他的文件import Vue from vue; import App from ./App.vue import router from ./router; import VueLazyload from "vue-lazyload"3、然后我们配置vue-lazyloadVue....

vue中使用图片懒加载vue-lazyload插件

本文主要介绍了浅谈vue中使用图片懒加载vue-lazyload插件详细指南，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。在vue中使用图片懒加载详细指南，分享给大家。具体如下：说明当网络请求比较慢的时候,提前给这张图片添加一个像素比较低的占位图片，不至于堆叠在一块，或显示大片空白，让用户体验更好一点。案例demo：懒加载案例demoInstallation 安装方式npm$ npm i vue-lazyload -DCDNCDN: https://unp...

图片的懒加载以及jquery.lazyload.js的使用实例

在项目中有时候会用到图片的延迟加载，那么延迟加载的好处是啥呢？我觉得主要包括两点吧，第一是在包含很多大图片长页面中延迟加载图片可以加快页面加载速度；第二是帮助降低服务器负担。下面介绍一下常用的延迟加载插件jquery.lazyload.js以及怎样实现一个延迟加载的插件。一：jquery.lazyload.js插件lazyload是jQuery写的延迟加载插件，在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载...

基于JS实现图片懒加载(lazyload)的实例教程【图】

图片懒加载也是比较常见的一种性能优化的方法，本篇文章主要介绍了原生JS实现图片懒加载(lazyload)实例，这里整理了详细的代码,有需要的小伙伴可以参考下前言图片懒加载也是比较常见的一种性能优化的方法，最近在用vue做一个新闻列表的客户端时也用到了，这里就简单介绍下实现原理和部分代码。实现原理加载页面的时候，图片一直都是流量大头，针对图片的性能方法也挺多的比如base64、雪碧图等；懒加载也是其中一种，主要原理是将非...

有关lazyload.js的课程推荐

LazyLoad延迟加载图片的jQuery插件_jquery【图】

怎样使用? Lazy Load 依赖于 jQuery. 请将下列代码加入页面 head 区域: 代码如下: 并且在你的执行代码中加入下面语句: 代码如下: $("http://www.appelsiini.net/projects/lazyload/img").lazyload(); 这将使 id="http://www.appelsiini.net/projects/lazyload/img" 区域下的图片将被延迟加载. 设置敏感度插件提供了 threshold 选项, 可以通过设置临界值 (触发加载处到图片的距离) 来控制图片的加载. 默认值为 0 (到...

jquery.lazyload实现图片延迟加载jquery插件_jquery【图】

什么是ImageLazyLoad技术在页面上图片比较多的时候，打开一张页面必然引起与服务器大数据量的交互。尤其是对于高清晰的图片，占的几M的空间。ImageLazyLoad技术就是，当前可见界面的图片是加载进来的，而不可见页面（通过滚动条下拉可见）中的图片是不加载的，这样势必会引起速度上质的提升。怎么实现ImageLazyLoad 一、使用JQuery插件，插件名: jquery.lazyload（7kb大小），压缩后（3kb大小）在线压缩js http://closure-comp...

javascriptpreload&lazyload_javascript技巧

代码如下:(function($) { (function($) { $.preload = function(data, cfg) { return new Loader(data, cfg); }; var maps = {}, on = $.event.add, un = $.event.remove, head = document.getElementsByTagName(head)[0], body = document.body, bs = $.browser, ie = bs.msie, webkit = bs.webkit, gecko = bs.mozilla, space = 1000, ajax = $.ajax, loaders = $.preload.loaders = { js : function(url, callback, timeout, de...

LazyLoad延迟加载(按需加载)_javascript技巧【图】

1：实际需求　　大型网站往往很矛盾，想用户在首页看到更多东西，又不想浪费太多服务器流量。比如一个有3屏的首页。可能50%的用户进首页的目的是点击首页的连接，到子页面。那么我们的网站却为100%的用户加载了 3个屏幕的所有内容。如果可以按需加载内容。就可以节约更多资源，做更多好的应用。 2：解决方案　　用客户端语言来判断用户当前的可视范围，只加载用户可视范围的内容。最主要的是图片。因为文字信息，相对较小，其他...

修改jquery.lazyload.js实现页面延迟载入_jquery

虽然实现了延迟载入的视觉效果，但是通过httpwatch等工具就可以看到，页面载入完毕后又发布很多空请求，而空请求就是由这些被替换过的img标签产生的，空请求也会一定程度上增加页面的打开时间，所以jquery.lazyload.js并未真生的实现页面延迟载入。我对jquery.lazyload.js做了一些修改，实现了页面的延迟载入，不仅仅是图片，html代码同样可以延迟载入，大大减少了页面发出的请求数，提高了页面的打开速度。修改后的jquery.lazyl...

javascript延迟加载技术(lazyload)简单实现_javascript技巧

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

Jquery.LazyLoad.js修正版下载，实现图片延迟加载插件_jquery【图】

从网上下载来的版本多多少少都有些BUG，尤其是加载后在IE6和IE7下图片闪动是个大问题，在网上查了很久，也没有找到相关的解决方案。没解决方案，就得发挥咱DIY的精神，自己想法解决，分析了BUG，理了理思路，结合前段时间我做弹出窗口特效的方法，解决了Jquery.LazyLoad.js的兼容问题，现将思路和方法与大家分享一下。解决思路大致是两点，一是从LazyLoad本身的滤镜参数下手，发现有一个参数在IE6和IE7是可以用的，就是show，那么...

JavaScript实现页面滚动图片加载(仿lazyload效果)_javascript技巧【图】

为什么写这篇文章？　　1.优化页面很实用的方法，技术实现不难；　　2.搜索了相关内容的文章，好像都是用jQuery的方法，可是如果不用jQuery的站长难道就不能用这种方法了么；　　3.做技术分享也是在让更多人帮自己测试，因为这个本人木有在项目中实际用到，都是自己琢磨的，所有如果有问题请大家指出，先谢谢了；　　4.这个月的博客还没写；　　5.刚好木有工作任务，此时不写更待何时... 　　现在的页面大多都具有的特点 - 内...

首页 / JAVASCRIPT / LazyLoad 延迟加载(按需加载)

LazyLoad 延迟加载(按需加载)

内容导读

内容图文

内容总结

内容备注

内容手机端

【LazyLoad 延迟加载(按需加载)】教程文章相关的互联网学习教程文章

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程