WEB性能优化-图片媒体内容是为了提升客户端体验。Nativejs实现（懒加载）原理：图片getBoundingClientRect().top的高度是否小于当前可见view的高度，如果更小，将data-src的url替换为src1。第一种方法：获取距离对应元素实例顶部的距离判断。//onload是等待所有资源文件加载完成后才绑定事件window.onload=function(){//获取图片列表，即img标签列表varimgs=document.querySelectorAll('img');//获取距离浏览器顶部的距离functiongetTop(e){returne.getBoundingClientRect().top;}//懒加载实现函数lazyload(imgs){//可见区域高度varh=window.innerHeight;//滚动区域的高度for(vari=0;igetTop(imgs[i])){//真实情况是一开始页面空白2秒，所以用setTimeout来计时2s(function(i){setTimeout(function(){//没有加上立即执行函数i会等于9//无形中加载图片或其他资源，//创建一张临时图片，这张图片不会去内存中的页面。实现隐形加载vartemp=newImage();temp.src=imgs[i].getAttribute('data-src');//只请求一次//onload判断图片加载完毕，如果图片加载完成，则赋值给dom节点temp.onload=function(){//获取自定义属性data-src，用真图替换假图imgs[i].src=imgs[i].getAttribute('data-src')}},2000)})(i)}}}延迟加载（imgs）；//滚动函数window.onscroll=function(){lazyload(imgs);}}2.第二种方法：使用intersectionObserver-api监听元素是否进入可视区域（比第一种方法简单）//使用es6写法constimgsBox=[...document.querySelectorAll('img')];functionlazyload(){for(leti=0;i0&&targetRect.top0&&targetRect.leftconstimgs=[];//用来存放图片src的数组，实际情况是去后台取值constimgBox=document.getElementById('imgbox');//获取存储src的图片框，通过预加载替换src//这里点击图片替换图片实现预加载leti=0;//用于获取数组图片srcimgBox.addEventListener('click',()=>{if(i{//这个数据是我们返回的promise对象，传递给imgs[i]});}}else{//这是数组中的最后一张图片}},false)functionpreLoad(src){returnnewPromise(reslove,reject)=>{constimgBox=document.getElementById('imgbox');imgBox.src=src;imgBox.addEventerListener('load',()=>{reslove(imgBox)});imgBox.addEventerListener('错误',()=>{reject()});}}借鉴：https://juejin.cn/post/703445...使用lazysizes.js插件实现懒加载是否实现了ajax，可以拾取lazysizes下载lazysizes.min.js脚本。（或者通过npm安装bowerinstalllazysizes--save：npminstalllazysizes--saveorbower）使用方法：官方使用示例官方文档：github
