图片懒加载三种解决方法

学习前端，三招，HTML、CSS、JavaScript。JavaScript的基础由DOM、BOM和ECMAScript组成。其中，ECMAScript是规范语言。现在ES6（ES2016~ES2022）都引用了它。它将每隔一段时间发布一次。目前，它每年发布一次。按年来说，现在是ECMAScript2022。什么是BOM，BOM就是浏览器对象模型（BrowserObjectModel）。它有六大对象文档：DOM（DOM包含在BOM中，但是DOM很重要，它的状态和BOM是一样的）event：event对象history：浏览器历史location：windowurl地址栏informationscreen：显示设备信息navigator：我们也非常了解浏览器的配置信息DOM。文本对象模型是指操作HTML（HyperTextMarkupLanguage）的API。DOM会将文档解析成一个由节点和对象（包含属性和方法的对象）组成的结构集合。之前开发页面的时候，都是先获取script标签中的节点（DOMApi），然后操作DOM，所以以前是《JavaScript 面向对象编程》、《JavaScript dom编程艺术》，但是操作DOM的API太长，不好写.JQuery对其进行了整合，简化了API，统一了操作和书写方式。如果扩展的话，可以扩展的东西会很多，铺垫了那么多，就是为了把文档拉出来。这次我们要说的offset、scroll、client都来自于“文档家族”。先匹配两张图，看看这三张是什么。clientclient指的是元素本身的可视化内容。不包括overflow折叠部分，不包括滚动条，border，包括padding有四个属性：clientHeight：对象的可见高度clientWidth：对象的可见宽度clientTop：元素距顶部的厚度，一般为0，因为scrollbarwillnotappearintheTopclientLeft：元素从左边算起的粗细，一般为0，因为滚动条不会出现在左边。offsetoffset指的是偏移量。包括该元素在文档中所占的所有显示宽度，包括滚动条、padding、border，不包括overflow隐藏部分有五个属性：offsetHeight：对象本身的绝对高度offsetHeight：=border-width*2+padding-top+height+padding-bottomoffsetWidth：对象本身的绝对宽度offsetWidth=border-width*2+padding-left+width+padding-rightoffsetParent：返回一个对象的引用，字面意思是，如果当前元素的父元素没有CSS定位（position是绝对/相对），offsetParent为body如果当前元素的父元素有CSS定位（position是绝对/相对），offsetParent取父元素中最近的元素offsetTop：relativelayout或offsetParent属性指定了父坐标距顶部的距离offsetTop=offsetParent的padding-top+中间元素的offsetHeight+margin-topofthecurrentelementoffsetLeft：相对布局或offsetParent属性指定父坐标的左距离包括本元素未显示的实际宽度，包括padding，不包括滚动条，borderscrollHeight：获取对象的滚动高度，对象的实际高度scrollWidth：获取对象的滚动宽度scrollTop：与当前元素与窗口顶部scrollLeft:Current元素与窗口最左边缘的距离其他innerHeight和clientHeight有什么区别准确的说，clientHeight是针对body的，innerHeight是窗口的document.顶部工具栏监控图片高度，实现懒加载。利用图片的offsetTop（偏移高度）和窗口的innerHeight、scrollTop判断图片是否在可见区域，即图片很多，优先显示窗口中的图片。如果您没有看到它，请不要先显示它。页面加载速度。向下滚动时，当后续图片的offsetTop（偏移高度）小于innerHeight（窗口高度）+scrollTop（滚动高度）时，表示该图片已经出现在窗口中，替换的关键代码加载的真实图像位于函数lazyload(){letseeHeight=window.innerHeight;让scrollTop=document.documentElement.scrollTop||文档.body.scrollTop;for(leti=n;i{entries.forEach((entry,index)=>{letlazyImage=entry.target;//如果元素可见if(entry.intersectionRatio>0){if(lazyImage.getAttribute("src")==='loading.gif'){lazyImage.src=lazyImage.getAttribute("data-src")}lazyImageObserver.unobserve(lazyImage)}})})对于(leti=0;i{console.log(entries)})上面代码中，回调函数使用了箭头函数的写法。回调函数的参数（entries）是一个数组，每个成员是一个IntersectionObserverEntry对象。例如，如果两个观察对象的可见性同时发生变化，则条目数组将有两个成员。IntersectionObserverEntry对象IntersectionObserverEntry对象提供目标元素的信息。totaltime有六个属性：可见性发生变化的时间，单位毫秒方法的返回值，如果没有根元素（即相对于视口直接滚动），则返回nullboundingClientRect：目标元素的矩形区域intersectionRect：目标元素与视口（或根元素）相交区域的信息intersectionRatio：目标元素的信息可见比例，即intersectionRect与boundingClientRect的比例，完全可见时为1，完全不可见时小于等于0。如图：如何兼容caniuse兼容性报告目前支持率为93.67%，但是iOS的支持必须在iOS12.2以上，如果是iPhoneX（2018.11）或之后的手机都支持，如果是之前，升级系统都会支持，考虑到有些人不会升级，所以这个兼容性不支持流行的场景，但是它的能力和性能都很好。综上，面试的时候被问到懒加载。我当时没有做相关准备。我说我不知道??。途虎的面试官会指导。水平，但当时我连卷轴都想不起来。现在回想起来，我真的是在准备的方向上犯了一个错误。说到图片懒加载，有两种方法：监听图片高度技术要点：监听滚动，滚动时遍历所有图片，如果图片偏移高度小于屏幕高度+滑动高度，表示已经出现在窗口中，并替换图片优点：兼容性好缺点：单纯使用scroll监控高度会造成性能问题，所以使用throttlingElement.getBoundingClientRect技术要点：与监控图片区别不大，只需将图片的偏移高度改为getBoundingClientRect().top，比较每张图片的高度是否出现在窗口（viewport）中，有则替换图片。优点：兼容性好，代码小于监控图片高度。缺点：同样使用scroll来监听，会导致性能问题使用IntersectionObserverApi技术要点：通过IntersectionObserverApi实现，图片元素一可见就调用回调，在回调中判断元素是否可见优点：简单自己写，性能不好缺点：兼容iOS12.2及以上，Android5以上在线演示：scrollgetBoundingClientRectIntersectionObserver参考资料JavaScript学习总结（三）BOM和DOM详解offset,scroll,clientinJS总结IntersectionObserverAPI教程