懒加载的概念与实现

文章目录

提示：以下是本篇文章正文内容，下面案例可供参考

一、懒加载是什么？

• 懒加载其实就是延时加载，即当对象需要用到的时候再去加载相关的对象。(即一个对象被创建出来就需要一笔开支，如果在运行过程中没有对该对象的操作，那么这个对象的创建就有有点儿过早或者浪费了，所以只有用到的时候再去创建才是最节省开支的)。

二、使用场景

• 懒加载其实就是重写对象的getter方法，当系统或者开发者调用对象的getter方法时，再去加载对象。在重写getter方法时，先判断对象当前是否为空，为空的话才去实例化相关对象
• 展示页面有很多图片。但是只展示几张，这时如果一次性图片全部加载出来很影响性能，所以使用懒加载，页面滚动到可视区再加载相关图片(这样在页面加载速度快的同时也减轻了服务器的压力，节约流量，增加用户体验度)

2.懒加载的优点

• 对系统的内存占用率会减少
• 不需要将对象的实例化全部写到视图的加载中，可以简化代码，增强代码的可读性

代码展示：

图片

HTML

<div class="wrap-box">
        <img data-src="images/architecture-768432_1920.jpg" alt="图片" width="49.8%">
        <img data-src="images/castle-gd39222771_1920.jpg" alt="图片" width="49.8%">
        <img data-src="images/fall-g823587ea5_1920.jpg" alt="图片" width="49.8%">
        <img data-src="images/hintersee-3601004_1920.jpg" alt="图片" width="49.8%">
        <img data-src="images/kuala-lumpur-1820944_1920.jpg" alt="图片" width="49.8%">
        <img data-src="images/lighthouse-6581129_1920.jpg" alt="图片" width="49.8%">
        <img data-src="images/mountains-1761292_1920.jpg" alt="图片" width="49.8%">
        <img data-src="images/skater-g105217e59_1920.jpg" alt="图片" width="49.8%">
        <img data-src="images/tianjin-2185510_1920.jpg" alt="图片" width="49.8%">
        <img data-src="images/architecture-768432_1920.jpg" alt="图片" width="49.8%">
        <img data-src="images/castle-gd39222771_1920.jpg" alt="图片" width="49.8%">
        <img data-src="images/fall-g823587ea5_1920.jpg" alt="图片" width="49.8%">
        <img data-src="images/hintersee-3601004_1920.jpg" alt="图片" width="49.8%">
        <img data-src="images/kuala-lumpur-1820944_1920.jpg" alt="图片" width="49.8%">
        <img data-src="images/lighthouse-6581129_1920.jpg" alt="图片" width="49.8%">
        <img data-src="images/mountains-1761292_1920.jpg" alt="图片" width="49.8%">
        <img data-src="images/skater-g105217e59_1920.jpg" alt="图片" width="49.8%">
        <img data-src="images/tianjin-2185510_1920.jpg" alt="图片" width="49.8%">
    </div>
    <div id='showtitle'>
        消息提示
    </div>

CSS

    .wrap-box {
        width: 80%;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .wrap-box img {
        min-height: 400px;
        margin-top: 3px;
    }

    .w-100 {
        width: 100%;
    }
    #showtitle{
        position: fixed;
        background-color: rgba(0, 0, 0, 0.671);
        width: 180px;
        height: 50px;
        margin:auto;
        top:0;
        left: 0;
        right: 0;
        bottom:0;
        z-index: 10;
        border-radius: 5px;
        line-height: 50px;
        text-align: center;
        color: rgb(216, 216, 216);
        display: none;
    }

JS

 let imgDoms = Array.from(document.querySelectorAll('img'));

    //判断元素是否在视口中
    function isIn(e) {
        let t = e.getBoundingClientRect();
        let clientHeight = window.innerHeight;
        return t.top <= clientHeight;
    }

    //判断滚动条是否到底
    function isbottom() {
        let r=document.documentElement.scrollHeight - document.documentElement.scrollTop - document.documentElement.clientHeight;
        return r<1;
    }

    //消息提示内容 string，显示毫秒数 number
    function showtitle(title,s){
        let dom= document.getElementById('showtitle');
        s=s? s : 1000;
        if (title) {
            dom.innerText=title;
        }
        dom.style.display='block';
        setTimeout(() => {
            dom.style.display='none';
        }, s);
    }

    //图片懒加载
    function imglazy() {
        imgDoms.forEach(item => {
            if (isIn(item)) {
                let datasrc = item.getAttribute('data-src');
                if (datasrc) {
                    item.src = datasrc;
                    item.removeAttribute('data-src');
                }
            }
        })
    }

    //无限图片
    function appchildImg() {
        if (isbottom()) {
            let content = document.getElementsByClassName('wrap-box')[0];
            //将已出现的dom图片进行随机组合
            let randomNum = Math.ceil(Math.random() * 10);
            for (let index = 0; index < randomNum; index++) {
                let r = Math.ceil(Math.random() * 10);
                content.appendChild(imgDoms[r])
            }
            showtitle('已添加'+randomNum+'张图片');
        }

    }

    window.onload = window.onscroll = function () {
        let timer = false;
        clearTimeout(timer)
        timer = setTimeout(() => {
            imglazy();
            appchildImg();
        }, 100)
    }