【4858美高梅】兑现原理,jQuery滚动加载图片完毕原理

By admin in 4858美高梅 on 2019年4月16日

正文首要通过以下几方面来表达懒加载本领的法则,个人前端小菜,有荒唐请多多建议

【4858美高梅】兑现原理,jQuery滚动加载图片完毕原理。本文首要透过以下几地点来讲明懒加载本领的规律,个人前端小菜,有不当请多多建议

一.图片懒加载

引用源文

  • 怎么样叫图片懒加载?
    当访问3个页面包车型地铁时候,先把img成分或是别的因素的背景图路线替换到一张大小为一*一px图纸的路径(那样就只需请求贰遍),只有当图片出现在浏览器的可视区域内,才设置图片真的的路子,让图片呈现出来,这正是图形懒加载。

  • 为啥要选拔那一个本领?
    借使2个页面中有成都百货上千图形,1上来就发送那么多请求,页面加载就会很遥远。如若js文件都位居了文书档案的尾部,恰巧页面的头顶又凭借那一个js文件,那就凉凉了;最要害的是,这么多的央浼,服务器或者会吃不消。

  • 怎么落到实处?
    一页面中的ig成分,如若未有src属性,浏览器就不会发出请求去下载图片,一旦经过js设置了图片路线,浏览器才会发送请求。(有点按需分配的意趣)
    二把真的的路线存在成分的“data-url”(自个儿取个名字)属性里,要用的时候就抽出来,再设置。

    ###### 三 获取某些成分的尺码大小、滚动条滚动距离以及偏移地方距离的主意:

    • 显示器可视窗口大小:
      原生方法:window.innerHeight 标准浏览器及IE九 ||
      document.documentElement.scrollTop标准浏览器及低版本IE标准方式||
      document.body.clientHeight 低版本混杂格局
      jQuery方法:$(window).height()
    • 浏览器窗口顶部与文书档案顶部之间的相距,也便是滚动条滚动的可观
         原生方法:window.pagYoffset——IE九+及标准浏览器 ||
      document.documentElement.scrollTop 包容ie低版本的正儿8经情势 ||
      document.body.scrollTop 包容混合情势;
      jQuery方法:$(document).scrollTop();

– 获取成分的尺寸,左边jquery方法,左侧原生方法

 $(o).width() = o.style.width; 

 $(o).innerWidth() = o.style.width+o.style.padding;

  $(o).outerWidth() = o.offsetWidth = o.style.width+o.style.padding+o.style.border;

  $(o).outerWidth(true) = o.style.width+o.style.padding+o.style.border+o.style.margin;

小心:要动用原生的style.xxx方法获得属性,这几个成分必须已经有内嵌的体制,如<div
style=”….”></div>;

如若原先是经过外部或内部样式表定义css样式,必须利用o.currentStyle[xxx]
|| document.defaultView.getComputedStyle(0)[xxx]来赢得样式值

– 获取成分的职责音讯

1 再次回到成分相对于文书档案document顶部、左侧的偏离;

jQuery:$(o).offset().top成分距离文书档案顶的离开,$(o).offset().left成分距离文书档案左边缘的偏离

原生:getoffsetTop()

返回的
要素相对于第二个以固定的父成分的偏移距离,注意与地点偏移距的区分;

    jQuery:position()返回一个对象,$(o).position().left = style.left,$(o).position().top = style.top;
  • 什么推断有些成分进入大概将在进入可视窗口区域?
    就是依照目的的边界与可视窗口边界相对距离的尺寸来判断。

js及jquery获取页面和因素的宽高

js:

网页可知区域宽: document.body.clientWidth;(不含滚动条)
网页可见区域高: document.body.clientHeight;(不含滚动条)
网页可知区域宽: document.body.offsetWidth;(包蕴边线的宽);
网页可知区域高: document.body.offsetHeight;(包罗边线的宽);
网页正文全文宽: document.body.scrollWidth;
网页正文全文高: document.body.scrollHeight;
网页被卷去的高(ff):document.body.scrollTop;
网页被卷去的高(ie): document.documentElement.scrollTop;
网页被卷去的左: document.body.scrollLeft;
网页正文部分上: window.screenTop;
网页正文部分左: window.screenLeft;
有些成分的小幅度: obj.offsetWidth;
某些成分的惊人: obj.offsetHeight;
某些成分的上面界到body最顶部的相距:
obj.offsetTop;(在要素的带有成分不含滚动条的情形下)
有个别成分的左侧界到body最左侧的离开:
obj.offsetLeft;(在要素的包罗成分不含滚动条的景况下)
回去当前因素的上面界到它的包罗元素的上面界的偏移量:
obj.offsetTop;(在要素的带有成分含滚动条的情形下)
重返当前成分的左侧界到它的包涵元素的左侧界的偏移量:
obj.offsetLeft;(在要素的带有成分含滚动条的场所下)

显示器分辨率的高: window.screen.height
荧屏分辨率的宽: window.screen.width
荧屏可用工作区中度: window.screen.availHeight
显示屏可用工作区宽度: window.screen.availWidth

HTML精鲜明位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动中度。
scrollLeft:设置或获得位于对象左侧界和窗口中近日可见内容的最左端之间的离开
scrollTop:设置或得到位于对象最顶端和窗口中可知内容的最上方之间的偏离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent
属性钦命的父坐标的万丈
offsetLeft:获取对象相对于版面或由 offsetParent
属性钦点的父坐标的计算左边地方
offsetTop:获取对象相对于版面或由 offsetTop
属性内定的父坐标的一个钱打二十五个结顶端地点
event.clientX 相对文书档案的品位座标
event.clientY 相对文书档案的垂直座标
event.offsetX 相对容器的品位坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop
相对文档的水准座标+垂直方向滚动的量

jquery:

获得浏览器呈现区域(可视区域)的可观 : $(window).height();
收获浏览器突显区域(可视区域)的大幅度 : $(window).width();
获得页面包车型客车文书档案中度:$(document).height();
获取页面包车型大巴文书档案宽度 :$(document).width();
浏览器当前窗口文书档案body的可观: $(document.body).height();
浏览器当前窗口文书档案body的幅度: $(document.body).width();
得到滚动条到顶部的垂直中度 (即网页被卷上去的冲天)
:$(document).scrollTop();
赢得滚动条到左手的垂直宽度 :$(document).scrollLeft();
赢得或设置成分的幅度:$(obj).width();
赢得或设置成分的冲天:$(obj).height();

得到或设置成分的肥瘦:$(obj).innerWidth(); (height + padding)
获取或安装成分的万丈:$(obj).innerHeight(); (height + padding)

收获或安装成分的增进率:$(obj).outerWidth(); (height + padding + border)
赚取或安装成分的莫斯科大学:$(obj).outerHeight(); (height + padding + border)

获得或设置元素的幅度:$(obj).outerWidth(true); (height + padding +
border + margin)
获得或安装成分的惊人:$(obj).outerHeight(true); (height + padding +
border + margin)
某些成分的下边界到body最顶部的距离:obj.offset().top;(在要素的盈盈成分不含滚动条的图景下)
有个别元素的左侧界到body最左侧的偏离:obj.offset().left;(在要素的隐含成分不含滚动条的事态下)
重回当前元素的上面界到它的蕴藏成分的上面界的偏移量:obj.offset().top(在要素的隐含成分含滚动条的气象下)
回来当前成分的左侧界到它的蕴藏成分的左侧界的偏移量:obj.offset().left(在要素的隐含元素含滚动条的气象下)

js:
网页可知区域宽: document.body.clientWidth;(不含滚动条) 网页可知区域高:
document.body.clientHeight;(不含滚动…

壹、什么是图片滚动加载?

壹、什么是图形滚动加载?

2.事件委托和事件捕获

源文来源

  • 概述
    事件委托还有叁个名字叫事件代理,利用事件冒泡,只钦点1个事件处理程序,就足以管理某一品类的具备事件。举个例子更活跃:
    有多少个同事估计会在周1接受快递,为签收快递,有三种艺术:一是多人在集团门口等快递;2是委托给前台MM签收。现实个中,大家基本上采用委托的方案(集团也不会容忍那么多职员和工人站在门口就为了等快递)。前台MM收到快递后,她会决断收件人是何人,然后遵照收件人的渴求签收,甚至代为付款。那种方案还有三个优势,那正是不怕集团里来了新职员和工人(不管多少),前台MM也会在吸收寄给新员工的快递后核查并代为签收。
    此处实在还有二层情趣的:
    先是,现在托付前台的同事是足以代为签收的,即程序中的现存的dom节点是有事件的;
    第1,新职员和工人也是足以被前台MM代为签收的,即程序中新丰盛的dom节点也是有事件的。
  • 为啥要用事件委托:
    制止频仍DOM操作,收缩dom与页面包车型客车竞相次数,提升品质,节省空间。
  • ###### 事件委托的规律:

动用事件的冒泡,(什么是事件冒泡呢:便是事件从最深的节点起始,然后稳步前行传播事件)。

<ul id="ul1">
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>

传统的li实现点击功能:
window.onload = function(){
    var oUl = document.getElementById("ul1");
    var aLi = oUl.getElementsByTagName('li');
    for(var i=0;i<aLi.length;i++){
        aLi[i].onclick = function(){
            alert(123);
        }
    }
}
通过遍历所有的Li绑定好点击事件。

接下来是利用事件委托:
window.onload = function(){
    var oUl = document.getElementById("ul1");
   oUl.onclick = function(){
        alert(123);
    }
}
这里用父级ul做事件处理,当li被点击时,由于冒泡原理,事件就会冒泡到ul上,因为ul上有点击事件,所以事件
就会被触发。如果想让事件代理的效果跟直接给节点的事件效果一样时,我们还有一招:

Event对象提供了一个属性叫target,可以返回事件的目标节点,标准浏览器用event.target,IE浏览器用
event.srcElement,此时只是获取了当前节点的位置,并不知道什么节点名称,这里再用nodeName来获取具体
是什么标签名,返回值是一个大写的字符串。
代码如下:

window.onload = function(){
  var oUl = document.getElementById("ul1");
  oUl.onclick = function(ev){
    var ev = ev || window.event;
    var target = ev.target || ev.srcElement;
    if(target.nodeName.toLowerCase() == 'li'){
         alert(123);
         alert(target.innerHTML);
    }
  }
}

  通俗的讲就是:当访问3个页面的时候,先把img成分或是别的因素的背景图片路线替换到一张大小为1*1px图片的门路(那样就只需请求一遍),只有当图片出现在浏览器的可视区域内时,才设置图片正真的不二等秘书诀,让图片显示出来。那正是图形懒加载。

  通俗的讲就是:当访问3个页面包车型客车时候,先把img成分或是其余因素的背景图片路径替换来一张大小为一*壹px图形的路径(这样就只需请求3遍),唯有当图片出今后浏览器的可视区域内时,才设置图片正真的门路,让图片显示出来。那正是图表懒加载。

三.事件捕获的推行种种

第二重申事件绑定期的包容性写法:
IE八及更早版本必要用attach伊夫nt(),平常版本用add伊夫ntListener(),对于包容写法,如下:

var x = document.getElementById("myBtn");

if (x.addEventListener) {                    //所有主流浏览器,除了 IE 8 及更早 IE版本

    x.addEventListener("click", myFunction);

} else if (x.attachEvent) {                  // IE 8 及更早 IE 版本

    x.attachEvent("onclick", myFunction);

}
其中element.addEventListener(event,function,useCapture)方法中,event不要使用on前缀,function
指定要事件触发时执行的函数;useCapture可选,是布尔值,指定事件是否在捕获或冒泡阶段执行。

事件冒泡和事件捕获的进程恰好相反,

<div id="div1">我是div1</div>
<div id="div2">我是div2</div>
<div id="div3">我是div3</div>
<div id="div4">我是div4</div>
var div1=document.getElementById("div1");

var div2=document.getElementById("div2");

var div3=document.getElementById("div3");

var div4=document.getElementById("div4");

div1.addEventListener("click",function(){

alert("我是div1");

})

div2.addEventListener("click",function(){

alert("我是div2");

})

div3.addEventListener("click",function(){

alert("我是div3");

})

div4.addEventListener("click",function(){

alert("我是div4");

})

当所有的Li标签绑定的事件的useCapture都是true,则点击第四个div时,会依次显示1-2-3-4,而如果是冒泡的
话,显示的结果应该是4-3-2-1

如果一个dom元素中,既有冒泡,又有捕获的话,会这么执行呢?W3C规定,任何发生在W3C模型中的事件,首先
进入捕获阶段,直到达到目标元素,再进入冒泡阶段。

二、为什要使用这些才能?

2、为什要使用那些本事?

四.JS数组措施

  • join()
    Array.join()是string.split()的逆向操作
  • reverse()
    将数组成分全体倒过来
  • sort()
    排序,能够在括号里写排序的条条框框
  • cancat()

var arr = [1,2,3];
arr.concat(4,5);
得到一个新的数组arr = [1,2,3,4,5]
  • slice(start,end)
    回去数组片段,不需求变量接收
  • splice()
    删除,插入,替换。
    这些措施的作用多数,参数的比不上决定功能的不等;
    一删除的用法,array.splice(starti,n),当中starti的意思是从哪个岗位上马,n指的是急需删除的个数。

<script>  
    var array=[1,2,3,4,5];  
    array.splice(3,2);  
    console.log(array);  
</script>  
得到的结果是:[1,2,3],这里被删除的元素其实可以用一个变量来接收

2插入的用法,array.splice(starti,0,值1,值二……),当中0表示删除0个因素,值一和值二表示必要插入的值。
三替换的用法,array.splice(starti,n,值1,值2),在须要替换的岗位先删除,然后再插入值~

  • 把数组当栈使用
    push(),尾部增添
    unshift(),尾部增加
    pop(),后面部分删除
    shift(),尾部删除
  • 遍历
    for…in…(除了能够遍历数组,还足以遍历对象的键值对)
  • indexof()从左向右索引,
    lastIndexof恰好相反,是从右向左索引。
  • 数组去重
    数组去重的艺术多数,比如接纳1个for循环,在里头用indexof的重回值来决断是或不是有重新,有的话就删除,没有的话继续;也许是三个巡回遍历2次。多数格局~

  比如一个页面中有那3个图纸,如天猫商城、京东首页等等,若是壹上来就发送这么多请求,页面加载就会很深切,假使js文件都坐落了文书档案的尾部,恰巧页面包车型大巴头部又凭借那些js文件,那就不佳办了。更为充足的是:1上来就发送百75个请求,服务器或然就吃不消了(又不是唯有一四人在走访那个页面)。

  比如多个页面中有广大图形,如Taobao、京东首页等等,倘诺一上来就发送这么多请求,页面加载就会很悠久,如若js文件都放在了文书档案的底层,恰巧页面包车型大巴头顶又凭借这一个js文件,那就不佳办了。更为足够的是:1上来就发送百七十七个请求,服务器大概就吃不消了(又不是唯有1三人在走访这些页面)。

五.落到实处拖拽功效

原理:
一 鼠标按下时,初阶推行
二 鼠标按下后,鼠标初阶运动时,供给拖拽的要素跟着一块儿活动
叁 鼠标松开,然后结束运动
相应的七个事件就是:
1 onmousedown
2 onmousemove
3 onmouseup
在鼠标按下时,记录当前因素的岗位newSite,同时设置三个标记,用来表示那时鼠标按下的事态,方便鼠标移动事件试行。
当鼠标甩手时,大家要将标记改换,表达此时鼠标松开了,当鼠标移动时就不能够再移动成分了。
当鼠标按下同时一举手一投足时,

  由此优点就很显眼了:不仅能够减轻服务器的压力,而且能够让加载好的页面越来越快地呈未来用户日前(用户体验好)。

  由此优点就很显明了:不仅能够减轻服务器的下压力,而且能够让加载好的页面越来越快地呈未来用户方今(用户体验好)。

3、怎么落到实处?

三、怎么落实?

  关键点如下:

关键点如下:

     
一、页面中的img成分,假若未有src属性,浏览器就不会发出请求去下载图片(也就从未有过请求咯,也就抓牢质量咯),一旦通过javascript设置了图片路线,浏览器才会送请求。有点按需分配的意趣,你不想看,就不给你看,你想看了就给您看~

     
一、页面中的img成分,倘使未有src属性,浏览器就不会发出请求去下载图片(也就从不请求咯,也就拉长品质咯),1旦通过javascript设置了图片路线,浏览器才会送请求。有点按需分配的意思,你不想看,就不给你看,你想看了就给您看~

  二、怎么样收获正真的门径,那么些轻巧,未来正真的路子存在成分的“data-url”(这些名字起个协调认识好记的就行)属性里,要用的时候就抽出来,再设置;

  二、怎么样获得正真的渠道,那几个大概,现在正真的门道存在成分的“data-url”(这几个名字起个温馨认识好记的就行)属性里,要用的时候就收取来,再安装;

  三、发轫相比前边,先精晓壹些主干的学识,比如说什么获得某些成分的尺寸大小、滚动条滚动距离及偏移地点距离;
 4858美高梅 1

  三、开首比较后面,先精通部分主导的文化,比如说怎么样收获某些成分的尺码大小、滚动条滚动距离及偏移地方距离; 

  一)显示屏可视窗口大小:对应于图中一、肆位置处

一)显示器可视窗口大小:对应于图中一、二人置处

    原生方法:window.innerHeight 标准浏览器及IE玖+ ||
document.documentElement.clientHeight 标准浏览器及低版本IE标准格局 ||

    原生方法:window.innerHeight 标准浏览器及IE9+ ||
document.documentElement.clientHeight 标准浏览器及低版本IE标准格局 ||
document.body.clientHeight 低版本混杂方式

           document.body.clientHeight 低版本混杂方式

       jQuery方法: $(window).height()

       jQuery方法: $(window).height() 

二)浏览器窗口顶部与文书档案顶部之间的相距,相当于滚动条滚动的偏离:约等于图中三、肆处对应的职位;

  二)浏览器窗口顶部与文书档案顶部之间的相距,也正是滚动条滚动的距离:也正是图中三、4处对应的岗位;

    原生方法:window.pagYoffset——IE9+及行业内部浏览器 ||
document.documentElement.scrollTop 兼容ie低版本的正规化情势 ||
document.body.scrollTop 包容混合情势;

    原生方法:window.pagYoffset——IE玖+及规范浏览器 ||
document.documentElement.scrollTop 包容ie低版本的正统方式 ||

        jQuery方法:$(document).scrollTop();

         document.body.scrollTop 包容混合方式;

三)获取成分的尺寸:对应于图中5、七个人置处;右侧jquery方法,右侧原生方法

        jQuery方法:$(document).scrollTop(); 

    $(o).width() = o.style.width;

  叁)获取成分的尺码:对应于图中伍、五地方处;左侧jquery方法,右侧原生方法

    $(o).innerWidth() = o.style.width+o.style.padding;

    $(o).width() = o.style.width; 

    $(o).outerWidth() = o.offsetWidth =
o.style.width+o.style.padding+o.style.border;

    $(o).innerWidth() = o.style.width+o.style.padding;

    $(o).outerWidth(true) =
o.style.width+o.style.padding+o.style.border+o.style.margin;

    $(o).outerWidth() = o.offsetWidth =
o.style.width+o.style.padding+o.style.border;

小心:要利用原生的style.xxx方法赚取属性,那个因素必须已经有内嵌的体裁,如<div
style=”….”></div>;

    $(o).outerWidth(true)
= o.style.width+o.style.padding+o.style.border+o.style.margin;

只要原本是透过外部或内部样式表定义css样式,必须运用o.currentStyle[xxx]
||document.defaultView.getComputedStyle(0)[xxx]来获得样式值

    注意:要选用原生的style.xxx方法获得属性,那几个因素必须已经有内嵌的样式,如<div
style=”….”></div>;

四)获取元素的职分音信:对应与图中七、六地点处

    假如原先是通过外部或内部样式表定义css样式,必须利用o.currentStyle[xxx]
|| document.defaultView.getComputedStyle(0)[xxx]来博取样式值

    壹)重临成分相对于文书档案document顶部、左边的偏离;

  肆)获取成分的岗位消息:对应与图中7、七地点处

    jQuery:$(o).offset().top成分距离文书档案顶的离开,$(o).offset().left成分距离文书档案左侧缘的偏离

    一)重临成分相对于文书档案document顶部、左侧的离开;

    原生:getoffsetTop(),高程上有具体表明,那边就大体了;

    jQuery:$(o).offset().top元素距离文书档案顶的偏离,$(o).offset().left成分距离文书档案右边缘的相距

     
顺便提一下回来成分相对于第一个以定点的父成分的偏移距离,注意与地点偏移距的区分;

    原生:getoffsetTop(),高程上有具体表明,那边就忽略了;

        jQuery:position()再次来到1个指标,$(o).position().left =
style.left,$(o).position().top = style.top;

    
 顺便提一下回去成分相对于第贰个以平昔的父成分的偏移距离,注意与地点偏移距的区分;

  4、知道怎么赢得成分尺寸、偏移距离后,接下去二个标题正是:怎么样决断有个别成分进入大概就要进入可视窗口区域?下边也通过一张图来讲明难题。

        jQuery:position()重回3个对象,$(o).position().left =
style.left,$(o).position().top = style.top;

4858美高梅 2

  肆、知道怎么收获成分尺寸、偏移距离后,接下去一个主题材料便是:怎么样推断有些成分进入或然将在进入可视窗口区域?上面也通过一张图来讲明难题。

    1)外面最大的框为实际页面的轻重缓急,中间灰湖绿色的框代表父成分的大大小小,对象一~八代表成分位于页面上的骨子里地方;以水平方平昔做如下表明!

4858美高梅 3

    二)对象八左侧界相对于页面左侧界的偏移距离(offsetLeft)大于父成分左侧界相对于页面左边界的距离,此时可判读成分位于父成分之外;

    壹)外面最大的框为实际页面的轻重,中间赤莲灰的框代表父成分的轻重,对象壹~八代表成分位于页面上的其实地点;以水平方一贯做如下表明!

    叁)对象7右边界跨过了父成分右侧界,此时:对象7左边界相对于页面左边界的晃动距离(offsetLeft)小于
父成分左侧界相对于页面左侧界的偏离,由此对象7就进来了父成分可视区;

    二)对象八左边界相对于页面左侧界的舞狮距离(offsetLeft)大于父成分左边界绝对于页面右边界的相距,此时可判读成分位于父成分之外;

    4)在指标⑥的岗位处,对象五的左侧界与页面左侧界的偏离 大于
父成分右边界与页面左侧界的离开;

    叁)对象柒左侧界跨过了父成分右侧界,此时:对象七右边界相对于页面左侧界的晃动距离(offsetLeft)小于 父成分右侧界相对于

    5)在指标五位置处时,对象5的右侧界与页面左边界的相距 小于
父成分左侧界与页面左边界的离开;此时,可判断成分处于父成分可视区外;

      页面左侧界的偏离,因此对象柒就进去了父成分可视区;

    6)因而水平方向必须买足五个规范,技巧证实成分位于父元素的可视区内;同理垂直方向也无法不满意七个尺码;具体见下文的源码;

    四)在目的陆的地方处,对象5的左边界与页面左侧界的偏离 大于 父成分左侧界与页面左侧界的偏离;

四、扩展为jquery插件
选择形式:$(“selector”).scrollLoad({ 参数在代码中有表明 })

    五)在目的两个人置处时,对象伍的右侧界与页面左边界的偏离 小于 父成分右边界与页面左侧界的相距;此时,可看清元素处于父成分可视区外;

(function($) {
 $.fn.scrollLoading = function(options) {
 var defaults = {
  // 在html标签中存放的属性名称;
  attr: "data-url",
  // 父元素默认为window
  container: window,
  callback: $.noop
 };
 // 不管有没有传入参数,先合并再说;
 var params = $.extend({}, defaults, options || {});
 // 把父元素转为jquery对象;
 var container = $(params.container);
 // 新建一个数组,然后调用each方法,用于存储每个dom对象相关的数据;
 params.cache = [];
 $(this).each(function() {
  // 取出jquery对象中每个dom对象的节点类型,取出每个dom对象上设置的图片路径
  var node = this.nodeName.toLowerCase(), url = $(this).attr(params["attr"]);
  //重组,把每个dom对象上的属性存为一个对象;
  var data = {
  obj: $(this),
  tag: node,
  url: url
  };
  // 把这个对象加到一个数组中;
  params.cache.push(data);
 });

 var callback = function(call) {
  if ($.isFunction(params.callback)) {
  params.callback.call(call);
  }
 };

 //每次触发滚动事件时,对每个dom元素与container元素进行位置判断,如果满足条件,就把路径赋予这个dom元素!
 var loading = function() {
  // 获取父元素的高度
  var contHeight = container.outerHeight();
  var contWidth = container.outerWidth();

  // 获取父元素相对于文档页顶部的距离,这边要注意了,分为以下两种情况;
  if (container.get(0) === window) {
  // 第一种情况父元素为window,获取浏览器滚动条已滚动的距离;$(window)没有offset()方法;
  var contop = $(window).scrollTop();
  var conleft = $(window).scrollLeft();
  } else {
  // 第二种情况父元素为非window元素,获取它的滚动条滚动的距离;
  var contop = container.offset().top;
  var conleft = container.offset().left;
  }

  $.each(params.cache, function(i, data) {
  var o = data.obj, tag = data.tag, url = data.url, post, posb, posl, posr;
  if (o) {
   //对象顶部与文档顶部之间的距离,如果它小于父元素底部与文档顶部的距离,则说明垂直方向上已经进入可视区域了;
   post = o.offset().top - (contop + contHeight);
   //对象底部与文档顶部之间的距离,如果它大于父元素顶部与文档顶部的距离,则说明垂直方向上已经进入可视区域了;
   posb = o.offset().top + o.height() - contop;

   // 水平方向上同理;
   posl = o.offset().left - (conleft + contWidth);
   posr = o.offset().left + o.width() - conleft;

   // 只有当这个对象是可视的,并且这四个条件都满足时,才能给这个对象赋予图片路径;
   if ( o.is(':visible') && (post < 0 && posb > 0) && (posl < 0 && posr > 0) ) {
   if (url) {
    //在浏览器窗口内
    if (tag === "img") {
    //设置图片src
    callback(o.attr("src", url));
    } else {
    // 设置除img之外元素的背景url
    callback(o.css("background-image", "url("+ url +")"));
    }
   } else {
    // 无地址,直接触发回调
    callback(o);
   }
   // 给对象设置完图片路径之后,把params.cache中的对象给清除掉;对象再进入可视区,就不再进行重复设置了;
   data.obj = null;
   }
  }
  });
 };
 //加载完毕即执行
 loading();
 //滚动执行
 container.bind("scroll", loading);
 };
})(jQuery);

    陆)由此水平方向必须买足三个条件,能力注脚成分位于父成分的可视区内;同理垂直方向也必须满意多个原则;具体见下文的源码;

正文已被收10到了《jquery图片加载方法汇总》,欢迎大家学习阅读。

四、扩展为jquery插件

如上即是滚动加载图片实现原理的事无巨细内容介绍,希望对大家的学习抱有扶助。

  使用办法:$(“selector”).scrollLoad({ 参数在代码中有表明 })

您恐怕感兴趣的稿子:

  • jquery完成图片预加载
  • JQuery达成Ajax加载图片的方法
  • jQuery
    剖断图片是或不是加载成功章程汇总
  • jquery突显loading图片直到网页加载成功的法门
  • jQuery处理图片加载战败的常用方法
  • jQuery轻松兑现图片预加载
  • jQuery完毕预加载图片的方法
  • jquery达成在页面加载完成后获得图片中度或宽度
  • 依照jquery实现图片相关操作(重绘、获取尺寸、调控大小、缩放)
  • jquery完成基于浏览器窗口大小活动缩放图片的方式
  • 选择jQuery实现认证上传图片的格式与大小
  • 4858美高梅,据说jquery实现的上传图片及图片大小验证、图片预览效果代码
  • jQuery完成图片加载成功后改成图片大小的不二等秘书籍
(function($) {
    $.fn.scrollLoading = function(options) {
        var defaults = {
            // 在html标签中存放的属性名称;
            attr: "data-url",
            // 父元素默认为window
            container: window,
            callback: $.noop
        };
        // 不管有没有传入参数,先合并再说;
        var params = $.extend({}, defaults, options || {});
        // 把父元素转为jquery对象;
        var container = $(params.container);
        // 新建一个数组,然后调用each方法,用于存储每个dom对象相关的数据;
        params.cache = [];
        $(this).each(function() {
            // 取出jquery对象中每个dom对象的节点类型,取出每个dom对象上设置的图片路径
            var node = this.nodeName.toLowerCase(), url = $(this).attr(params["attr"]);
            //重组,把每个dom对象上的属性存为一个对象;
            var data = {
                obj: $(this),
                tag: node,
                url: url
            };
            // 把这个对象加到一个数组中;
            params.cache.push(data);
        });

        var callback = function(call) {
            if ($.isFunction(params.callback)) {
                params.callback.call(call);
            }
        };

        //每次触发滚动事件时,对每个dom元素与container元素进行位置判断,如果满足条件,就把路径赋予这个dom元素!
        var loading = function() {
            // 获取父元素的高度
            var contHeight = container.outerHeight();
            var contWidth = container.outerWidth();

            // 获取父元素相对于文档页顶部的距离,这边要注意了,分为以下两种情况;
            if (container.get(0) === window) {
                // 第一种情况父元素为window,获取浏览器滚动条已滚动的距离;$(window)没有offset()方法;
                var contop = $(window).scrollTop();
                var conleft = $(window).scrollLeft();
            } else {
                // 第二种情况父元素为非window元素,获取它的滚动条滚动的距离;
                var contop = container.offset().top;
                var conleft = container.offset().left;
            }

            $.each(params.cache, function(i, data) {
                var o = data.obj, tag = data.tag, url = data.url, post, posb, posl, posr;
                if (o) {
                    //对象顶部与文档顶部之间的距离,如果它小于父元素底部与文档顶部的距离,则说明垂直方向上已经进入可视区域了;
                    post = o.offset().top - (contop + contHeight);
                    //对象底部与文档顶部之间的距离,如果它大于父元素顶部与文档顶部的距离,则说明垂直方向上已经进入可视区域了;
                    posb = o.offset().top + o.height() - contop;

                    // 水平方向上同理;
                    posl = o.offset().left - (conleft + contWidth);
                    posr = o.offset().left + o.width() - conleft;

                    // 只有当这个对象是可视的,并且这四个条件都满足时,才能给这个对象赋予图片路径;
                    if ( o.is(':visible') && (post < 0 && posb > 0) && (posl < 0 && posr > 0) ) {
                        if (url) {
                            //在浏览器窗口内
                            if (tag === "img") {
                                //设置图片src
                                callback(o.attr("src", url));
                            } else {
                                // 设置除img之外元素的背景url
                                callback(o.css("background-image", "url("+ url +")"));
                            }
                        } else {
                            // 无地址,直接触发回调
                            callback(o);
                        }
                        // 给对象设置完图片路径之后,把params.cache中的对象给清除掉;对象再进入可视区,就不再进行重复设置了;
                        data.obj = null;
                    }
                }
            });
        };
        //加载完毕即执行
        loading();
        //滚动执行
        container.bind("scroll", loading);
    };
})(jQuery);

 

五、参考:

  1、jQuery.lazyload详解

  2、张大大:

  三、Jquery图片延迟加载插件jquery.lazyload. 
  四、jQuery.lazyload完毕延时加载详解步骤 
  5、jquery
lazyload延迟加载技艺的落到实处原理分析 

  6、Lazyload
延迟加载效果

  7、图片延迟加载(lazyload)的落到实处原理

 

                         

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有