正在进入ing...

使用javascript&jQuery实现站点图片懒加载(lazy-load)）

发布时间:2020-09-27 浏览量: 2038 文章分类: 前端相关

很多图片多的网站，在网站运行的时候都会执行懒加载的模式。

所谓懒加载(lazy-load)也就是检测页面的视窗大小，根据视口的大小来判断当前显示到哪里了，然后将显示到视口的图片展示出来。这样可以避免图片太多，打开缓慢的问题。

实现的原理

在页面初始化渲染的时候，我们一般的图片样式如下

<img src="https://wuyabala.com/static/img/logo.jpg">

而我们试行懒加载的时候，可以给里面多一个属性data-src,将图片的地址属性存放在里面，src先写为空。当这个图片处于页面可视范围的时候，在把data-src赋给src即可。 那么实际我们的样式如下：

       <img class="lazy-load-img pic"
                alt="页面加载中.."
                data-src="https://wuyabala.com/static/img/logo.jpg"
        />

效果

注意看滚动的时候，和页面发送的请求，也就是当视口显示到的时候，才会发起请求显示图片

前端图片懒加载(lazy-load)

实现

javascript

既然要实现页面所有的图片（或指定的图片）那么需要先获取到这些图片的属性，然后只要计算出视口的高度确认显示的内容，然后将处于视口的图片data-src属性移动到src里面即可实现。

<script>
    // 获取所有的图片标签
    const imgs = document.getElementsByClassName("lazy-load-img");
    const viewHeight = window.innerHeight || document.documentElement.clientHeight;
    let num = 0;
    function lazyload() {
        console.log("滚动...");
        for (let i = num; i < imgs.length; i++) {
            // 用可视区域高度减去元素顶部距离可视区域顶部的高度
            let distance = viewHeight - imgs[i].getBoundingClientRect().top;
            // 如果可视区域高度大于等于元素顶部距离可视区域顶部的高度，说明元素露出
            if (distance >= 0) {
                // 给元素写入真实的src，展示图片
                imgs[i].src = imgs[i].getAttribute("data-src");
                // 前i张图片已经加载完毕，下次从第i+1张开始检查是否露出
                num = i + 1;
            }
        }
    }
    // 是的页面初始化是加载首屏图片
    window.onload = lazyload();
    window.addEventListener("scroll", lazyload);
</script>

jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片懒加载</title>
    <script src="../plugins/jquery-3.5.1.min.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: gray;
            margin-bottom: 20px;
        }
        .pic{
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div class="container">
    <div>
        <!-- 注意我们并没有为它引入真实的src -->
        <img class="lazy-load-img pic"
                alt="加载中"
                data-src="https://wuyabala.com/static/img/logo.jpg"
        />
    </div>
    <div>
        <img
                class="lazy-load-img pic"
                alt="加载中"
                data-src="https://wuyabala.com/static/img/logo.jpg"
        />
    </div>
    <div>
        <img
                class="lazy-load-img pic"
                alt="加载中"
                data-src="https://wuyabala.com/static/img/logo.jpg"
        />
    </div>
    <div>
        <img
                class="lazy-load-img pic"
                alt="加载中"
                data-src="https://wuyabala.com/static/img/logo.jpg"
        />
    </div>
    <div>
        <img
                class="lazy-load-img pic"
                alt="加载中"
                data-src="https://wuyabala.com/static/img/logo.jpg"
        />
    </div>
    <div>
        <img
                class="lazy-load-img pic"
                alt="加载中"
                data-src="https://wuyabala.com/static/img/logo.jpg"
        />
    </div>
    <div>
        <img
                class="lazy-load-img pic"
                alt="加载中"
                data-src="https://wuyabala.com/static/img/logo.jpg"
        />
    </div>
    <div>
        <img
                class="lazy-load-img pic"
                alt="加载中"
                data-src="https://wuyabala.com/static/img/logo.jpg"
        />
    </div>
    <div>
        <img
                class="lazy-load-img pic"
                alt="加载中"
                data-src="https://wuyabala.com/static/img/logo.jpg"
        />
    </div>
    <div>
        <img
                class="lazy-load-img pic"
                alt="加载中"
                data-src="https://wuyabala.com/static/img/logo.jpg"
        />
    </div>
    <div>
        <img
                class="lazy-load-img pic"
                alt="加载中"
                data-src="https://wuyabala.com/static/img/logo.jpg"
        />
    </div>
    <div>
        <img
                class="lazy-load-img pic"
                alt="加载中"
                data-src="https://wuyabala.com/static/img/logo.jpg"
        />
    </div>
    <div>
        <img
                class="lazy-load-img pic"
                alt="加载中"
                data-src="https://wuyabala.com/static/img/logo.jpg"
        />
    </div>
    <div>
        <img
                class="lazy-load-img pic"
                alt="加载中"
                data-src="https://wuyabala.com/static/img/logo.jpg"
        />
    </div>
    <div>
        <img
                class="lazy-load-img pic"
                alt="加载中"
                data-src="https://wuyabala.com/static/img/logo.jpg"
        />
    </div>
    <div>
        <img
                class="lazy-load-img pic"
                alt="加载中"
                data-src="https://wuyabala.com/static/img/logo.jpg"
        />
    </div>
    <div>
        <img
                class="lazy-load-img pic"
                alt="加载中"
                data-src="https://wuyabala.com/static/img/logo.jpg"
        />
    </div>
    <div>
        <img
                class="lazy-load-img pic"
                alt="加载中"
                data-src="https://wuyabala.com/static/img/logo.jpg"
        />
    </div>
    <div>
        <img
                class="lazy-load-img pic"
                alt="加载中"
                data-src="https://wuyabala.com/static/img/logo.jpg"
        />
    </div>
    <div>
        <img
                class="lazy-load-img pic"
                alt="加载中"
                data-src="https://wuyabala.com/static/img/logo.jpg"
        />
    </div>
    <div>
        <img
                class="lazy-load-img pic"
                alt="加载中"
                data-src="https://wuyabala.com/static/img/logo.jpg"
        />
    </div>
    <div>
        <img
                class="lazy-load-img pic"
                alt="加载中"
                data-src="https://wuyabala.com/static/img/logo.jpg"
        />
    </div>
    <div>
        <img
                class="lazy-load-img pic"
                alt="加载中"
                data-src="https://wuyabala.com/static/img/logo.jpg"
        />
    </div>
</div>


<script>
    // 获取页面所有的图片标签
    const lazyLoadImgs = $('.lazy-load-img');
    // 获取可视区域的高度
    const viewHeight = $(window).height();
    let num = 0;

    function lazyload(){
        console.log('滚动...');
        for (let i = num; i < lazyLoadImgs.length; i++) {
            // 用可视区域高度减去元素顶部距离可视区域顶部的高度
            let distance = viewHeight - lazyLoadImgs[i].getBoundingClientRect().top;
            // 如果可视区域高度大于等于元素顶部距离可视区域顶部的高度，说明元素露出
            if (distance >= 0) {
                // 给元素写入真实的src，展示图片
                lazyLoadImgs[i].src = lazyLoadImgs[i].getAttribute("data-src");
                // 前i张图片已经加载完毕，下次从第i+1张开始检查是否露出
                num = i + 1;
            }
        }
    }
    $(function(){
        lazyload();
        $(window).scroll(function(){
            lazyload()
        })
    })
</script>

</body>
</html>