什么是图片懒加载

我们有一个页面，展示图片列表的，图片很多多到当前屏幕展示不下。懒加载就是加载可视区域内的图片。一般图片我们是使用 <img> 标签来实现的，浏览器根据标签上的 src 属性来发起获取图片的请求。我们在未进入到可视区域内，先不给 <img> 标签添加 src 属性，这样动态的控制标签 src 属性就可以完成懒加载了。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片懒加载</title>
    <style>
        .list{
            margin: 0 auto;
            width: 500px;
        }

        .images{
            width: 100%;
            height: 100%;
        }

        .images img{
            width: 500px;
            height: 300px;
        }
    </style>
</head>
<body>
    <div class="list">
        <div class="images">
            <img data-src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3681880960,455182084&fm=26&gp=0.jpg">
            <img data-src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3721400011,1403299293&fm=26&gp=0.jpg" alt="">
            <img data-src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1920661160,3332292898&fm=26&gp=0.jpg" alt="">
            <img data-src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3780377048,403990503&fm=26&gp=0.jpg" alt="">
            <img data-src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=389790139,3572772338&fm=26&gp=0.jpg" alt="">
            <img data-src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=21597997,2581227973&fm=26&gp=0.jpg" alt="">
            <img data-src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3744811142,1586661297&fm=26&gp=0.jpg" alt="">
            <img data-src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3681880960,455182084&fm=26&gp=0.jpg">
            <img data-src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3721400011,1403299293&fm=26&gp=0.jpg" alt="">
            <img data-src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1920661160,3332292898&fm=26&gp=0.jpg" alt="">
            <img data-src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3780377048,403990503&fm=26&gp=0.jpg" alt="">
            <img data-src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=389790139,3572772338&fm=26&gp=0.jpg" alt="">
            <img data-src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=21597997,2581227973&fm=26&gp=0.jpg" alt="">
            <img data-src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3744811142,1586661297&fm=26&gp=0.jpg" alt="">
            <img data-src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3681880960,455182084&fm=26&gp=0.jpg">
            <img data-src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3721400011,1403299293&fm=26&gp=0.jpg" alt="">
            <img data-src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1920661160,3332292898&fm=26&gp=0.jpg" alt="">
            <img data-src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3780377048,403990503&fm=26&gp=0.jpg" alt="">
            <img data-src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=389790139,3572772338&fm=26&gp=0.jpg" alt="">
            <img data-src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=21597997,2581227973&fm=26&gp=0.jpg" alt="">
            <img data-src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3744811142,1586661297&fm=26&gp=0.jpg" alt="">
        </div>
    </div>
    <script src="./index.js"></script>
</body>
</html>

let images = document.querySelectorAll('img');
let number = images.length;
let index = 0;      // 存储图片加载到的位置，避免没吃都从第一张图片开始遍历
let clientHeight = gelCientHeight();  //屏幕可视区域的高度
let scrollTop = getScrollTop();   // 滚动条距离顶部高度
let isLoadImage = false;        // 当前容器内的图片是否加载完成

function lazyload(){
    isLoadImage = index >= number;
    scrollTop = getScrollTop();
    for (let i = 0; i < number; i++) {
        // images[i].offsetTop = element.offsetTop   获取元素相对于文档顶部的高度
        if (images[i].offsetTop < clientHeight + scrollTop){
            console.log(images[i].getAttribute('src'));
            if(!images[i].getAttribute('src')){
                images[i].src = images[i].getAttribute('data-src')
            }
            index = i + 1;
        }
        
    }
}

// 获取滚动条距离顶部高度
function getScrollTop (){
    return document.documentElement.scrollTop || document.body.scrollTop;
}

// 获取屏幕可视区域的高度
function gelCientHeight(){
    return document.documentElement.clientHeight
}

// 重新计算可见区域高度
function computedClientHeight(){
    clientHeight = gelCientHeight();
    console.log(clientHeight);
}

lazyload();


const debounce = (fn, interval = 300) => {
    let timer = null;
    return function () {
        clearTimeout(timer);
        timer = setTimeout(() => {
            fn.apply(this, arguments);
        }, interval);
    }
}

const throttle = (fn, interval = 300) => {
    let run = true;
    return function () {
        if (!run) return;
        run = false;
        setTimeout(() => {
            fn.apply(this, arguments);
            run = true;
        }, interval);
    };
}

window.addEventListener('scroll',throttle(lazyload),100)

window.addEventListener('resize', debounce(computedClientHeight,500))

玖叶教程网

前端编程开发入门

原生JavaScript实现图片懒加载 _（前端实现图片懒加载）

什么是图片懒加载

示例