专栏首页web秀JavaScript实现图片懒加载

JavaScript实现图片懒加载

原理

1、 将图片真实路径赋值到img标签的data-src属性中,而不是src属性 2、 获取img节点距离浏览器顶部的距离,如果小于或等于浏览器窗口的可视高度,那么就将data-src的值赋值到src里去

实现

// 封装图片懒加载类
class LazyLoad {
  constructor(el) {
    this.imglist = Array.from(document.querySelectorAll(el)); // 需使用懒加载的图片集合
    this.init(); // 初始化
  }
  // 获取图片与窗口的信息
  getBound(el) {
    let bound = el.getBoundingClientRect();
    let clientHeight = window.innerHeight;
    // 图片距离顶部的距离 <= 浏览器可视化的高度,从而推算出是否需要加载
    return bound.top <= clientHeight - 300; // -300是为了看到效果loading图
  }
  // 判断是否该图片是否可以加载
  canILoading() {
    let imglist = this.imglist;
    for (let i = imglist.length; i--;) {
      this.getBound(imglist[i]) && this.loadImage(imglist[i], i);
      // 等同于
      // if(this.getBound(imglist[i])){this.loadImage(imglist[i], i)}
    }
  }
  // 将真实图片路径加载到节点上
  loadImage(el, index) {
    // 获取节点data-src
    let src = el.getAttribute('data-src');
    // 赋值到src,从而请求资源
    el.src = src;
    // 避免重复判断,已经确定加载的图片应当从imglist移除
    this.imglist.splice(index, 1);
  }
  // 当浏览器滚动的时候,继续判断
  bindEvent() {
    window.addEventListener('scroll', () => {
      this.imglist.length && this.canILoading();
    });
  }
  // 初始化
  init() {
    this.canILoading();
    this.bindEvent();
  }
 }
// 实例化对象,参数则是需要使用懒加载的图片类名
const lazy = new LazyLoad('.lazyload')
<img class="lazyload" data-src="图片路径" src="默认图片路径">
<img class="lazyload" data-src="图片路径" src="默认图片路径">
<img class="lazyload" data-src="图片路径" src="默认图片路径">
<img class="lazyload" data-src="图片路径" src="默认图片路径">
<img class="lazyload" data-src="图片路径" src="默认图片路径">
<img class="lazyload" data-src="图片路径" src="默认图片路径">

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript深入学习this、call、apply和bind

    this的指向问题一直是面试里的常客。也是es5的众坑之一。对于es6而讲,它极大地避免了this带来的错误。但是为了为了维护一些老代码,还是有必要了解this...

    Javanx
  • 大厂面试:JavaScript各种源码解析

    func 是要调用的函数,是由 context 调用,func 的指向 context,所以关注点在 context 指向

    Javanx
  • Vue + Vuex + Element UI实现动态全局主题颜色

    经常用Element UI的小伙伴,应该知道,Element UI官方文档,可以自由更换主题。那么,我们怎么把这个功能用到自己项目中呢?其实官方文档也有所说明,...

    Javanx
  • 当年pass到很多扒手的题

    可以看到经过了2次请求,最后在http://datamining.comratings.com/exam3中得到数据,现在注意resquesr中的hearder...

    润森
  • LeetCode 696. 计数二进制子串

    给定一个字符串 s,计算具有相同数量0和1的非空(连续)子字符串的数量,并且这些子字符串中的所有0和所有1都是组合在一起的。

    Michael阿明
  • Git仓库初始化

    JavaEdge
  • 老司机开车,教会女朋友什么是「马拉车算法」

    马拉车算法( Manacher‘s Algorithm )是小吴最喜欢的算法之一,因为,它真的很牛逼!

    五分钟学算法
  • 老司机开车,教会女朋友什么是「马拉车算法」

    马拉车算法( Manacher‘s Algorithm )是小吴最喜欢的算法之一,因为,它真的很牛逼!

    帅地
  • 一个叫「 黑洞 」的人工智能

    但有网友称,「视觉中国」已在国内获得此黑洞图片的版权,并注明若用于商业用途,请联系客户代表。

    mixlab
  • maven打包src下的xml文件

    最近做cxf+spring+mybatis集成的一个小例子,用maven打包后,mybatis的sql语句老是调不到。 报以下错误:

    九州暮云

扫码关注云+社区

领取腾讯云代金券