NativeJS实现图片延迟加载（lazyload）

前言图片延迟加载也是一种比较常见的性能优化方法。最近在用Vue做新闻列表客户端的时候也用到了。这里简单介绍一下实现原理和部分代码。实现原理在加载页面时，图片永远是流量最大的，图片的表现方式有很多，比如base64、sprite等，懒加载也是其中之一。主要原理是将非首屏图片的src设置为默认值，然后监听窗口的滚动，当图片出现在窗口中时，给它一个真实的图片地址，从而保证加载第一屏的速度，然后按需加载图片。具体代码首先在渲染时，图片引用默认图片，然后将真实地址放在data-*属性上。然后监听滚动，直接用window.onscroll就可以了，但是要注意它类似于窗口的滚动和调整大小，以及触发非常频繁的mousemove等事件。最好使用throttle或debounce来控制触发频率。underscore和lodash都对这两个方法进行了封装，这里就不做介绍了。接下来要判断图片是否出现在窗口中，主要是三个高度：1、当前body从顶部滚动了多远。2.窗户的高度。3.当前图片距离顶部的距离。OffsetTop相关属性可以参考这里，具体代码如下：window.onscroll=_.throttle(this.watchscroll,200);watchscroll(){varbodyScrollHeight=document.body.scrollTop;//body滚动高度varwindowHeight=window.innerHeight;//窗口高度varimgs=document.getElementsByClassName('lazyloadimg');for(vari=0;iwindow.innerHeight2.页面滚动到bottom（此时可以调整接口获取更多内容）：window.scrollY+window.innerHeight>document.body.offsetHeight