基于纯JS的多图片偷懒加载的偷懒过程分析

一、效果图如下

以上效果图及效果要求如下

1.图片未加载时，默认显示加载图片的背景图像

2.当您第一次进入页面时，会在第一个屏幕上自动加载图片

3.下拉界面。当图片容器完全显示屏幕时，立即加载图片并替换背景图片

4.加载图片时，会逐渐显示图片效果

二、困难

1)如何Ajax请求数据

2)如何将json数据动态绑定到html。

3)如何通过图片的定位计算触发图片的偷懒加载机制

4)增加额外项目，显示图片时出现过渡动画

三、前期知识点

1)Ajax相关知识，XMLHttpRequest对象，所有现代浏览器都支持。

2)innerHTML，数据绑定使用字符串拼接

html domgetattribute()方法返回自定义属性名的属性值(主要用于返回自定义属性的属性值)

4)图片的onload事件，当图片的src属性的属性值正确时(即图片可以成功加载)，可以触发图片的onload事件

第四，困难一个一个被打破

1)如何Ajax请求数据

分四步走

//1)首先创建一个Ajax对象var xhr=new XMLHttpRequest//2)打开我们需要请求的数据的文件地址。//在网址后添加随机数。目的：清除每次请求数据时生成的缓存(获取请求)。//由于每个访问地址不同，浏览器不会尝试缓存来自服务器的响应并读取本地缓存的数据。xhr.open('get '，' json/newsList.txt '？Math.random()，false)；//false代表同步//3)侦听请求xhr . onreadystatechange=function(){ if(xhr . readystate==4/2 \ d { 2 } $/。test(xhr . status)){ var val=xhr . response text；JSON data=utils . JSON parse(val)；}}//4)发送请求xhr . send(null)；2)如何将json数据动态绑定到html。

字符串连接(数据绑定中最常用的方法)，即通过使用innerHTML，执行页面元素的字符串连接，然后重新呈现到页面

var str=if (jsonData) { for (var i=0，len=jsonData.length我透镜；I){ var CodeTa=JSondata[I]；str=' listr=' div mg src=' http : ' TrueIMg=' CodeDATa[' IMg ']' '/div '；str='divh2 '可数据[' title ']'/H2 '；str='p '可数据[' desc ']'/p '；str='/div '；str='/Li/div '；} news.innerHTML=str} strong /strong优势：最常见的数据绑定方式，因为浏览器只需要渲染一次(所有模板引擎的数据绑定原理是字符串拼接、vue、angular、jade、kTemplate.js等。)

内容提前拼接，最后统一添加到页面，只触发一次回流

缺点：当我们将新字符串添加到#ul1时，原来三个li的鼠标滑动效果消失了(原来标签绑定的事件全部消失)。最初，oUl.innerHTML的功能是以字符串的形式取出原始标签。当使用原始标签时，相应的事件绑定消失了，然后字符串被拼接。

但是，拼接后，还是一串！最后，字符串被统一添加到页面中，浏览器也需要将字符串呈现到相应的标签中

3)如何通过图像的定位计算触发图像惰性加载机制(最关键的点)

思考：

a:表示距屏幕顶部的距离

//这里使用的是utils工具类中的offset方法。参见下面的源代码。偏移量(curimgpar)。场外库里姆帕尔。具体实施的权利。b:表示屏幕和滚动条之间的滚动距离

//这里使用了utils工具类中的win方法。具体实现请参考以下源代码var b=utils . win(' client height ')utils . win(' scroll top ')。使用A B时，此时懒加载的默认图片可以完全显示，此时需要触发图片的懒加载

4)加载图片时，图片会逐渐显示

思路，利用window.setInterval方法，通过对当前图片的透明度属性(curImg.style。不透明度)从透明0开始到透明度1,变化总时间为500毫秒即可

//-实现渐现效果函数fadeIn(curImg) { var duration=500，//总时间间隔=10，//10ms走一次目标=1;//总距离是1 var步长=(目标/持续时间)*区间；//每一步的步长var定时器=窗口。set interval(function(){ var curOp=utils。getcs2s(Curimg，‘不透明度’)；if (curOp=1) { curImg.style。不透明度=1;window.clearInterval(计时器);return } curOp=stepcurimg。风格。不透明度=CurOp},间隔);}五、完整代码

1)main.html

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '！-做移动端响应式布局页面，都需要加下面的meta-meta name=' viewport ' content=' width=device-width，initial-scale=1.0 '！- meta:vp tap一键生成-标题多张图片的延迟加载/title style type=' text/CSS ' * { margin : 0；padd : 0；字体系列："微软无衬线字体";font-size : 14px} ul、李{列表式：无；} img { display:块；border:无；} .新闻{ padding: 10px }。新闻li {位置：相对；高度： 60pxpadd : 10px 0；边框-底部： 1px实心# eee}。新闻li div:first第一个孩子{ /*意思是，李下面的子div，中的第一个*/position:绝对值；top : 10pxleft : 0；宽度： 75px高度： 60px背景： url(' ./img/正在加载.巴布亚新几内亚')无重复中心中心# e1e1e1背景尺寸： 100% 100%;} /*移动端布局，最外层容器是不设置宽高的*/.新闻李分区：第一个孩子img { display:无宽度： 100%;高度： 100%;opa城市3360 0；/*这里设置为0的目的是，实现渐进的效果，后面的渐显函数，作用就是让图片透明都从0变成1*/} .新闻李：分位第二个孩子(2){身高： 60px左边距left: 80px}。新闻李第：师(2名){身高： 20像素；线高： 20px/*实现文字超出一行自动裁切*/overflow:隐藏；文本-飞越：省略号；/*超出部分省略号显示*/空白： nowrap/*强制不换行*/} .新闻Li div : th-child(2)p {行高： 20pxfont-size : 12pxcolor : # 616161 }/style/head body ul id=' news ' class=' news '！-李！- div -！- img src='http:/img/new1 .PNG' alt='' -！- /div -！- div -！- h2香港四大家族往事，香港四大家族往事，香港四大家族往事/h2 -！- p香港四大家族往事：李嘉诚为郑裕彤扶灵香港四大家族往事：李嘉诚为郑裕彤扶灵/p -！- /div -！- /li - /ul脚本类型=' text/JAVAScript ' src=' http :/tool/utils。js '/script脚本类型=' text/JavaScript ' var news=document。getelementbyid(' news ')，imgList=news。getelementsbytagname(' img ')；//1、获取需要绑定的数据（通过Ajax)var jsonData=null；~function () { //1)首先创建一个埃阿斯对象var xhr=new XMLHttpRequest//2)打开我们需要请求的数据的那个文件地址//网址地址后面加随机数目的：清除每一次请求数据时候(get请求)产生的缓存//因为每次访问的地址不一样，样浏览器就不会尝试缓存来自服务器的响应，读取本地缓存的数据。

xhr.open('get '，' json/newsList.txt '？Math.random()，false)；//false代表同步//3)监听请求的状态xhr。onreadystatechange=function(){ if(xhr。readystate===4 /^2\d{2}$/.测试(xhr。status)){ var val=xhr。responsetextJSON数据=utils。JSON解析(val)；} } //4)发送请求xhr。发送(null)；}();控制台。日志(JSondata)；//2、数据绑定（使用字符串拼接的方式)~ function(){ var str=' '；if (jsonData) { for (var i=0，len=jsonData.length我透镜；I){ var CodeTa=JSondata[I]；str=' listr=' div mg src=' http : ' TrueIMg=' code data[' IMg ']' '/div '；str='divh2 '可数据[' title ']'/H2；str='p '可数据[' desc ']'/p；str='/div '；str='/Li/div '；} news . innerhtml=str } }()；//3、图片延迟加载//-首先实现单张图片的延时加载函数lazymgg(Curimg){ var oImg=new Image；奥姆。src=Curimg。GetAttribute(' TrueIMg ')；奥姆。on load=function(){ Curimg。src=这个。src库里姆。风格。display=' block法丁(居里姆)；oImg=null } Curimg . IsLoad=true }//-循环处理每一张图片函数handleAllImg() { for (var i=0，len=imgList.length我透镜；I){ var Curimg=IMglist[I]；if (curImg.isLoad) { //当前图片处理过的话，就不需重新进行处理继续；} //-只有当A小于B的时候再进行处理//var A=utils.offset(curImg).顶级古董。偏右；//这里A不能这么计算，因为此时图片是隐藏的，没有图片，他的偏右当让也是为0 //如果我要的到图片的A值，我们可以通过拿到他父节点的容器就行了，哈哈var curImgPar=curImg.parentNode，A=utils . offset(curimpar).偏置顶部压缩机。偏移心，B=utils。win('客户高度')实用程序。win('滚动顶部')；if(A B){ lazy mg(Curimg)；} } } //-实现渐现效果函数fadeIn(curImg) { var duration=500，//总时间间隔=10，//10ms走一次目标=1;//总距离是1 var步长=(目标/持续时间)*区间；//每一步的步长var定时器=窗口。set interval(function(){ var curOp=utils。getcs2s(Curimg，‘不透明度’)；if (curOp=1) { curImg.style。不透明度=1;window.clearInterval(计时器);return } curOp=stepcurimg。风格。不透明度=CurOp},间隔);} //4、开始的时候（过500毫秒)加载一屏幕的图片，当滚动条滚动的时候，加载其他图片window.setTimeout(handleAllImg，500)；窗户。on scroll=handleAllImg/script/body/html2)utils.js

//为了与全局变量冲突，我们使用单例模式var utils={ //jsonParse:把数据格式的字符串转化为数据格式的对象jsonParse:函数(字符串){ var val=null尝试{ val=JSON。解析(字符串)；} catch(e){ val=eval('(' str '))；}返回val}，getCss2SS :函数(curEle，attr) { var val=null，reg=nullif('窗口中的getcomputed style’){ val=window。getComputedStyle(curEle，null)[attr]；} else { if (attr=='不透明度){ val=curele。current style[attr]；//-返回阿尔法(不透明度=10)注册=/^alpha\(opacity=(\d(？\.\d)？)\)$/I；//获取10这个数字val=reg.test(val)？reg.exec(val)[1]/100:1 //超厉害，测试与高级管理人员一起使用！} val=curele。current style[attr]；} reg=/^-？\d (\ .\d)？(px|pt|rem|em)？$/I；//匹配的情况：纯数值或者带单位的数值返回reg.test(val)？parseFloat(val): val；}，偏移量：函数(curEle){ var total ft=null，totalTop=null，par=curEle.offsetParent//首先把自己本身的进行累加total ft=curele . offsetleftotaltop=curele . offsettopwhile(par){ if(navigator。用户代理。indexof(' MSIE 8.0 ')===-1){//累加父级参照物边框总ToP=面值。客户端ToP总英尺=标准杆。客户离开；} //累加父级参照物本身的偏移总ToP=面值。偏移量ToPtotal ft=par . offsetleftar=par . offsetparent }控制台。log('偏移顶部： ' TotaL top '，偏移左侧： ' TotaL ft)；定义变量结果={ };result . offsettop=totaltopresult . offsetleft=totalft返回结果；}，赢：函数(attr，value){ if(value===undefined){返回文档。文档元素[attr]| |文档。正文[attr]；}文档。文档元素[attr]=值；文件。body[attr]=值；}};3、json文件

[{ ' img ' :]./img/new1 .巴布亚新几内亚','标题' : '1网络强国战略与"十三五"十四大战略，' desc': '1互联网是二十世纪人类最大的发明，互联网是二十世纪人类最大的发明}，{'img': ' ./img/new2 .巴布亚新几内亚','标题' : '2网络强国战略与"十三五"十四大战略，' desc': '2互联网是二十世纪人类最大的发明，互联网是二十世纪人类最大的发明}，{'img': ' ./img/new3 .巴布亚新几内亚','标题' : '3网络强国战略与"十三五"十四大战略，' desc': '3互联网是二十世纪人类最大的发明，互联网是二十世纪人类最大的发明'}]以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。