js原生懒加载与和种高度问题

懒加载条件；img.offsetTop < window.innerHeight + document.body.scrollTop;  图片的src为空,写在data-src属性上

满足条件则取dataset的src赋值给src即可

性能优化则利用去抖节流即可

滚动时可以判断方向 向下滚动  利用数组装未渲染的图片

也可以保留window的scrolltop 每次滚动时保留最大的scrolltop 筛选大于这个scrolltop的渲染

 

clientx, 指距离浏览器顶端距离

offsetx  指鼠标距离其包含最近的x距离

pagex  指距离document的距离

screenx  指距离电脑屏幕

scrolltop 或者pageYoffset指被滚去的高度

offsettop 指定位元素距离其相对的定位元素最顶端距离  包含滚动

scrollheight  包含滚动后隐藏的元素总高度

offsetheight  包含padding边框滚动条的高度

clentheight   纯内容高度  不包含padding边框滚动条

 

返回顶部:scrollintoview  offsettop=0

 

 

 

 

参考文章:https://blog.csdn.net/weixin_40929761/article/details/81061434