原生方式实现图片懒加载

最新推荐文章于 2021-05-29 09:34:39 发布

i'm_zhangting

最新推荐文章于 2021-05-29 09:34:39 发布

阅读量147

点赞数

分类专栏： JavaScript 前端性能优化

本文链接：https://blog.csdn.net/weixin_42549581/article/details/101041162

版权

JavaScript 同时被 2 个专栏收录

41 篇文章 2 订阅

订阅专栏

前端性能优化

7 篇文章 0 订阅

订阅专栏

Web API : DOM.getBoundingClientRect()
getBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。
1.语法：这个方法没有参数。

  rectObject = object.getBoundingClientRect();

2.返回值类型：
rectObject.top：元素上边到视窗上边的距离;
rectObject.right：元素右边到视窗左边的距离;
rectObject.bottom：元素下边到视窗上边的距离;
rectObject.left：元素左边到视窗左边的距离;
在这里插入图片描述
参考: https://www.jianshu.com/p/824eb6f9dda4

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>原生方式实现图片懒加载</title>
    <style>
    body {
        text-align: center;
    }

    img {
        width: 100%;
        max-width: 300px;
        height: 200px;
        margin-bottom: 100px; 
    }
    </style>
</head>
<body>
    <div id="imgBoxFrame">
          <div class="img-warpper">
            <img class="lazyload" data-original="https://media3.giphy.com/media/k5GuJn7VslbpGQqHUB/200w.webp" src="https://media3.giphy.com/media/k5GuJn7VslbpGQqHUB/200w.webp">
          </div>
          <div class="img-warpper">
            <img class="lazyload" data-original="https://media1.giphy.com/media/2A7yoKf2B87kotTApZ/200w.webp" src="https://media1.giphy.com/media/2A7yoKf2B87kotTApZ/200w.webp">
          </div>
          <div class="img-warpper">
            <img class="lazyload" data-original="https://media2.giphy.com/media/3h1rwFW1PpLxD9xLUR/200w.webp">
          </div>
          <div class="img-warpper">
            <img class="lazyload" data-original="https://media0.giphy.com/media/igHgY3xzYxmRcxwZBs/200w.webp">
          </div>
          <div class="img-warpper">
            <img class="lazyload" data-original="https://media0.giphy.com/media/69v5dFsLtzdpaFZz2N/200w.webp">
          </div>
    </div>
    <script>
// 原理
// 将资源路径赋值到img标签的data-xx属性中，而不是src属性
// 获取img节点距离浏览器顶部的距离，如果小于或等于浏览器窗口的可视高度，那么就将data-xx的值赋值到src里去
// 用到的Web API
// DOM.getBoundingClientRect()

    // 图片懒加载类
    class LazyLoad {
        constructor(el) {
            this.imglist = Array.from(document.querySelectorAll(el)); // 需使用懒加载的图片集合
            this.init(); // 初始化
        }
        // 判断是否该图片是否可以加载
        canILoad() {
            let imglist = this.imglist,
                len = imglist.length;
            for (let i = len-1; i>=0; i--) {
                // 缩写，相当于if true
                this.getBound(imglist[i]) && this.loadImage(imglist[i], i);
            }
        }
        // 获取图片与窗口的信息
        getBound(el) {
            let bound = el.getBoundingClientRect();
            let clientHeight = window.innerHeight;
            // 图片距离顶部的距离 <= 浏览器可视化的高度，从而推算出是否需要加载
            return bound.top <= clientHeight - 100; // -100是为了看到效果，也可以去掉
        }
        // 加载图片
        loadImage(el, index) {
            // 获取之前设置好的data-original值
            let src = el.getAttribute('data-original');
            // 赋值到src，从而请求资源
            el.src = src;
            // 避免重复判断，已经确定加载的图片应当从imglist移除
            this.imglist.splice(index, 1);
        }
        // 当浏览器滚动的时候，继续判断
        bindEvent() {
            window.addEventListener('scroll', () => {
                this.imglist.length && this.canILoad();
            });
        }
        // 初始化
        init() {
            this.canILoad();
            this.bindEvent();
        }
    }

    // 实例化对象，参数则是需要使用懒加载的图片类名
    const lazy = new LazyLoad('.lazyload')

    </script>

</body></html>