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

前言

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

实现原理

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

具体代码

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

<image src='./../assets/default.png' :data-src='item.allPics' class='lazyloadimg'>

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

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

window.onscroll =_.throttle(this.watchscroll, 200);
watchscroll () {
  var bodyScrollHeight = document.body.scrollTop;// body滚动高度
  var windowHeight = window.innerHeight;// 视窗高度
  var imgs = document.getElementsByClassName('lazyloadimg');
  for (var i =0; i < imgs.length; i++) {
  var imgHeight = imgs[i].offsetTop;// 图片距离顶部高度
  if (imgHeight < windowHeight + bodyScrollHeight) {
   imgs[i].src = imgs[i].getAttribute('data-src');
   img[i].className = img[i].className.replace('lazyloadimg','')
  }
  }
 }

结语

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

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

2.页面滚动到底部了(这时可去调接口获取更多内容)：window.scrollY + window.innerHeight > document.body.offsetHeight

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

# lazyload.js # 懒加载 # lazyload # 加载图片 # JavaScript实现图片懒加载(Lazyload) # 深入研究jQuery图片懒加载 lazyload.js使用方法 # js前端实现图片懒加载(lazyload)的两种方式 # JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版) # 图片懒加载imgLazyLoading.js使用详解 # JS实现图片懒加载(lazyload)过程详解 # 利用原生JS实现懒加载lazyLoad的三种方法总结 # 加载 # 出现在 # 雪碧 # 防抖 # 的是 # 都是 # 都有 # 放在 # 给他 # 这么多 # 设为 # 这两个 # 要注意 # 这类 # 做一个 # 动了 # 类似于 # 多做 # 也用 # 大家多多

返回目录在线咨询

上一篇：如何从零开始轻松搭建个性化网站
下一篇：C#中解析SVG这类特殊的XML方言命名空间与特定属性的处理

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

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

您的项目需求