jQuery滚动加载图片的实现原理

本文主要通过以下几个方面来说明懒加载技术的原理，个人前端配菜，请多指出错误。

1.什么是图像滚动加载？

一般来说，在访问页面时，先将img元素或其他元素的背景图片的路径替换为大小为1*1px的图片的路径(这样你只需要请求一次)，只有当图片出现在浏览器的可视区域时，才设置图片的真实路径以便显示。这是偷懒加载图片。

二、为什么要用这项技术？

比如一个页面有很多图片，比如淘宝、JD.COM主页等。如果你一上来就发送这么多请求，页面会被加载很长时间。如果js文件放在文档的底部，而页面的头部恰好依赖于这个js文件，那就很难了。更有甚者，如果你一上来就发送180个请求，服务器可能会不堪重负(不只是一两个人访问这个页面)。

因此，优势是显而易见的：不仅可以减轻服务器的压力，而且加载的页面可以更快地呈现给用户(用户体验良好)。

三、如何实现？

要点如下：

1.对于页面中的img元素，如果没有src属性，浏览器不会发送下载图片的请求(所以没有请求，这样会提高性能)。一旦通过javascript设置了图片路径，浏览器就会发送请求。意思是按需分配。如果你不想看，就不会给你看。如果你想看，我给你看~

2.如何获取真实路径，这个很简单，现在真实路径存在于元素的“data-url”属性中(大家熟知的命名就可以了)，想用的时候拿出来，然后设置；

3.在开始比较之前，你应该了解一些基本的知识，比如如何得到一个元素的大小，滚动条的滚动距离和偏移距离。

1)屏幕可视窗口大小：对应图中位置1、2。

原生方法：window.innerHeight标准浏览器和IE9 | | document . document element . clIEnt height标准浏览器和较低版本ie标准模式|| document.body.clientHeight较低版本混杂模式。

JQuery方法：$(窗口)。高度()。

2)浏览器窗口顶部到文档顶部的距离，即滚动条的滚动距离：即图中3、4处对应的位置；

原方法：window.pagYoffset——IE9和标准浏览器| | document . document element . scroll top兼容ie || document.body.scrollTop低版本的标准模式兼容混杂模式；

JQuery方法：$(文档)。scroll top()；

3)获取元素的尺寸：对应图中位置5、6；左边是Jquery方法，右边是原生方法。

$(o)。width()=o . style . width；

$(o)。inner width()=o . style . width o . style . padding；

$(o)。outwidth()=o . offsetwidth=o . style . width o . style . padding o . style . border；

$(o)。outwidth(true)=o . style . width o . style . padding o . style . border o . style . margin；

注意：要使用本机style.xxx方法获取属性，此元素必须已经有嵌入的样式，例如div style=' . '/div；

最初，如果css样式是由外部或内部样式表定义的，则必须使用o . current style[XXX]| | document . default view . getcomputed style(0)[XXX]来获取样式值。

4)获取元素的位置信息：对应图中位置7、8。

1)返回元素与文档顶部和左侧之间的距离；

jquery:$(o)之间的距离。偏移量()。顶部元素和文档的顶部，以及$(o)之间的距离。偏移量()。元素和文档的左边缘。

Native: getoffsetTop()，在高程中指定，此处忽略；

顺便返回元素相对于第一个父元素的偏移距离，注意与上面偏移距离的差异；

JQuery:position()返回一个对象$ (o)。位置()。左=样式。左，$ (o)。位置()。top=样式。顶部；

4.在知道如何获取元素大小和偏移距离后，接下来的问题是：如何判断一个元素是否已经进入或将进入可视窗口区域？这里有一张图片来说明这个问题。

1)外面最大的框是实际页面的大小，中间的浅蓝色框代表父元素的大小，对象1-8代表元素在页面上的实际位置；在水平方向做以下描述！

2)对象8的左边界和页面的左边界之间的offsetLeft距离大于父元素的右边界和页面的左边界之间的距离，此时可解释元素位于父元素之外；

3)对象7的左边界穿过父元素的右边界。此时，对象7的左边界相对于页面的左边界的偏移量小于父元素的右边界和页面的左边界之间的距离，因此对象7进入父元素的可见区域。

4)在对象6的位置，对象5的右边界和页面的左边界之间的距离大于父元素的左边界和页面的左边界之间的距离；

5)在对象5的位置，对象5的右边界到页面左边界的距离小于父元素的左边界到页面左边界的距离；此时可以判断该元素在父元素的可视区域之外；

6)因此，必须在水平方向购买两个条件，以显示元素位于父元素的可视区域；同样，垂直方向也必须满足两个条件；详见下面的源代码；

第四，扩展到jquery插件：$(“选择器”)。scrolLoad({代码中描述了参数})。

(函数($) {$。fn . scrolloading=function(options){ vardefaults={//存储在html标记中的属性的名称；attr :“data-URL”，//默认的父元素是windowcontainer: window，callback3360 $。noop }；//不管有没有传入参数，先合并。var params=$。extend({}，默认值，选项| | { })；//将父元素变成jquery对象；var container=$(params . container)；//创建一个新的数组，然后调用每个方法来存储与每个dom对象相关的数据；params . cache=[]；$(这个)。每个(函数(){//取出jquery对象中每个dom对象的节点类型，取出在每个dom对象上设置的图片路径：var node=this . nodename . to lower case()，URL=$ (this)。attr(params[' attr '])；//将每个dom对象上的属性重新组织并保存为一个对象；var data={ obj: $(this)，tag:节点，URL : URL }；//将此对象添加到数组中；params.cache.push(数据)；});var回调=函数(调用){ if ($)。isFunction(params . callback)){ params . callback . call(call)；} };//每次触发滚动事件时，判断每个dom元素和容器元素的位置。如果满足条件，给出这个dom元素的路径！Var loading=function() {//获取父元素的高度var cont height=container . outer height()；var cont width=container . outwidth()；//获取父元素相对于文档页面顶部的距离。注意这里。有两种情况：如果(container . get(0)==window){//第一种情况，父元素是window，那么获取浏览器滚动条的滚动距离；$(window)没有offset()方法；var contop=$(窗口)。scroll top()；var conleft=$(窗口)。scrolleft()；} else {//第二种情况，父元素是非窗口元素，所以获取其滚动条的滚动距离；var contop=container.offset()。顶部；var conleft=container.offset()。向左；} $.每个(params.cache，function(i，data) { var o=data.obj，tag=data.tag，url=data.url，post，posb，posl，posrIf (o) {//对象顶部与文档顶部之间的距离。如果它小于父元素底部和文档顶部之间的距离，则表示它已垂直进入可见区域。post=o.offset()。top-(contop contHeight)；//对象底部和文档顶部之间的距离。如果它大于父元素顶部和文档顶部之间的距离，则意味着它已经进入垂直方向的可见区域。posb=o.offset()。top o . height()-contop；//水平方向也是如此；posl=o.offset()。左-(con left CONTwidth)；posr=o.offset()。left o . width()-con left；//只有对象可见，且四个条件都满足时，才能给对象一个图片路径；if(o . is(' : visible ')(post 0 posb 0)(posl 0 posr 0)){ if(URL){//在浏览器窗口if(tag==' img '){//设置图片src回调(o.attr('src '，URL))。} else {//设置img (o.css ('background-image '，' URL ('URL ')))以外元素的后台URL回调；}} else {//没有地址，直接触发回调(o)；}//为对象设置图片路径后，清除params.cache中的对象；当对象再次进入可视区域时，不会重复设置。data.obj=null} } });};//加载后执行加载()；//滚动执行container . bind(' roll '，loading)；};})(jQuery)；本文已整理成《jquery图片加载方法汇总》，欢迎大家学习阅读。

以上是滚动加载图片原理的详细介绍，希望对大家的学习有所帮助。