本地JS偷懒加载图片的例子

序

图片的延迟加载也是一种常见的性能优化方法，最近在将vue用作新闻列表客户端时使用了这种方法。这里简单介绍一下实现原理和部分代码。

实施原则

在加载页面的时候，图片一直都是一个很大的流量，对于图片的表现方式有很多，比如base64，Sprite等。懒加载也是其中之一。主要原理是将非第一屏的src设置为默认值，然后监控窗口滚动，当图片出现在窗口时再给图片赋予真实的图片地址，这样可以保证第一屏的加载速度，然后根据需要加载图片。

绝对代码

首先渲染时，图片引用默认图片，然后将真实地址放在data-*属性上。

Image src='。/./assets/default . png ' : data-src=' item。allpics' class=' lazylooadimg '然后听滚动，就用window.onscroll，但是注意滚动和调整大小类似window。还有一些频繁触发的事件，如mousemove。最好使用节流或去抖功能来控制触发频率。下划线和lodash中有两种封装方法，这里就不介绍了。

然后，要判断画面是否出现在窗口，主要在三个高度：1。尸体从顶部滚了多远？2、窗户的高度。3.到当前图片顶部的距离。具体代码如下：

window.onscroll=_。节流阀(this.watchscroll，200)；watch scroll(){ var body scroll height=document . body . scroll top；//正文滚动高度var window height=window . inner height；//窗口高度vari MGS=document . getelementsbyclassname(' lazylooadimg ')；for(var I=0；i imgs.lengthi ) { var imgHeight=imgs[i]。offsetTop//图片自上而下的高度if(img height window height body scroll height){ img[I]。src=imgs [I]。getattribute(' data-src ')；Img [I]。类名=img [I]。类名。替换(' laziloadimg '，' ')}}结论

差不多了。下一次，我们可能会补充实现防抖和节流的源代码。最后，添加两个常见的滚动判断：

1.页面滚动离开第一个屏幕(此时，可以显示返回顶部的按钮): document . body . scroll topwindow . inner height。

2.页面已经滚动到底部(此时，您可以调整界面以获取更多内容):window . scrolly window . inner height document . body . offset heart。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。