原生JS实现图片懒加载(lazyload)实例

　　

　　

图片懒加载也是比较常见的一种性能优化的方法,最近在用vue做一个新闻列表的客户端时也用到了,这里就简单介绍下实现原理和部分代码。

　　

　　

加载页面的时候,图片一直都是流量大的头,针对图片的性能方法也挺多的比如base64,雪碧图等,懒加载也是其中一种,主要原理是将非首屏的图片src设为一个默认值,然后监听窗口滚动,当图片出现在视窗中时再给他赋予真实的图片地址,这样可以保证首屏的加载速度然后按需加载图片。

　　

原生JS实现图片懒加载(lazyload)实例“> <br/> 　　</p> 　　<p> </p> 　　<p>首先在渲染时,图片引用默认图片,然后把真实地址放在数据- *属性上面。<br/> 　　</p> 　　 　　<pre类= 　　& lt;图像src=" https://www.yisu.com/assets/default.png ": data-src=' https://www.yisu.com/zixun/item.allPics '类=' lazyloadimg祝辞 　　 　　

然后是监听滚动,直接用window.onscroll就可以了,但是要注意一点的是类似于窗口的滚动和缩放,还有mousemove这类触发很频繁的事件,最好用节流(节流阀)或防抖函数(防反跳)来控制一下触发频率.underscore和lodash里面都有封装这两个方法,这里先不多做介绍了。
　　

　　

接着要判断图片是否出现在了视窗里面,主要是三个高度:1,当身体前从顶部滚动了多少距离。2,视窗的高度。3,当前图片距离顶部的距离。具体代码如下:
　　

　　 　　 　　窗口。onscroll=_.throttle(这一点。watchscroll, 200); 　　watchscroll () { 　　var bodyScrollHeight=document.body.scrollTop;//身体滚动高度 　　var windowHeight=window.innerHeight;//视窗高度 　　var一=document.getElementsByClassName (“lazyloadimg”); 　　(var=0;我& lt;imgs.length;我+ +){ 　　var imgHeight=一个[我].offsetTop;//图片距离顶部高度 　　如果(imgHeight & lt;windowHeight + bodyScrollHeight) { 　　一个[我]。src=https://www.yisu.com/zixun/imgs[我].getAttribute (“data-src”); 　　img[我]。className=img[我].className.replace (‘lazyloadimg’,”) 　　} 　　} 　　} 　　 　　

　　

大概内容就这么多了,下次可能会补充一下防抖节流源码的实现。最后再补充两个常见的滚动判断:
　　

　　

1。页面滚动离开首屏(这时可显示回到顶部的按钮):<代码> document.body。scrollTop祝辞window.innerHeight 　　

　　

2。页面滚动到底部了(这时可去调接口获取更多内容):<代码>窗口。scrollY +窗口。innerHeight祝辞document.body.offsetHeight

　　

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

原生JS实现图片懒加载(lazyload)实例