jQuery实现图片懒加载

时间：2022-03-26 15:58:38
<!DOCTYPE html>

<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>jquery 实现懒加载</title>

    <style>

        ul,

        li {

            list-style: none;

        }

        .container {

            width: 800px;

            margin: 0 auto;

        }

        .container li {

            float: left;

            margin: 10px 10px;

        }

        .container li img {

            width: 340px;

            height: 260px;

        }

    </style>

</head>

<body>

    <ul class="container">

        <li>

            <a href="#">

                <img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/1.jpg" />

            </a>

        </li>

        <li>

            <a href="#">

                <img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/2.jpg" />

            </a>

        </li>

        <li>

            <a href="#">

                <img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/3.jpg" />

            </a>

        </li>

        <li>

            <a href="#">

                <img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/4.jpg" />

            </a>

        </li>

        <li>

            <a href="#">

                <img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/5.jpg" />

            </a>

        </li>

        <li>

            <a href="#">

                <img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/6.jpg" />

            </a>

        </li>

        <li>

            <a href="#">

                <img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/7.jpg" />

            </a>

        </li>

        <li>

            <a href="#">

                <img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/8.jpg" />

            </a>

        </li>

        <li>

            <a href="#">

                <img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/9.jpg" />

            </a>

        </li>

        <li>

            <a href="#">

                <img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/10.jpg" />

            </a>

        </li>

        <li>

            <a href="#">

                <img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/11.jpg" />

            </a>

        </li>

        <li>

            <a href="#">

                <img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg" />

            </a>

        </li>

        <li>

            <a href="#">

                <img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/13.jpg" />

            </a>

        </li>

        <li>

            <a href="#">

                <img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/14.jpg" />

            </a>

        </li>

        <li>

            <a href="#">

                <img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/15.jpg" />

            </a>

        </li>

        <li>

            <a href="#">

                <img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/16.jpg" />

            </a>

        </li>

    </ul>

</body>

 //引入jquery

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>

<script>

    //监听文档是否有触发滚动事件

    $(document).on('scroll', function () {

        $(".container img").each(function () {

            // 判断是否是在可视区域内 并且 判断lodingimg($(this))是否有加载过 如果加载过就不执行此步骤 要不就会再次执行

            if (showhide($(this)) && !lodingimg($(this))) {

                voluation($(this))  //把自定义的 data-src 赋值给img中的src属性

            }

        })

    })

    // 判断图片是否需要加的必要条件

    function showhide(img) {

        var scrolltop = $(document).scrollTop()              //获取浏览器卷去的部分

        var browser = document.documentElement.clientHeight; //获取浏览器中的可视区域

        var offsettop = img.offset().top;                    //获取图片距离顶部的距离

        var imgheight = img.height()                         //获取图片元素的高度

        // 从上往下加载图片 判断 如果图片的距离 > 浏览器卷去的部分 && 图片距离 < 卷去的部分 + 浏览器的可视区域

        // 从下往上加载图片 或者 图片距离 < 卷去的部分 && 图片距离 > 卷去的高度 - 图片自身的高度（边界条件）

        if (offsettop > scrolltop && offsettop < (scrolltop + browser) || offsettop < scrolltop && offsettop > (scrolltop - imgheight)) {

            return true

        }

        return false

    }

    // 把自定义的 data-src 赋值给img中的src属性

    function voluation(img) {

        return img.attr('src', img.attr('data-src'))

    }

    // 用于判断是否有加载

    function lodingimg(img) {

        return img.attr('data-src') === img.attr('src')

    }

    // 首次渲染 如果不提前执行一次页面图片显示空白 必须滚动才能够加载

    $(".container img").each(function () {

        onecarry($(this))

    })

    // 首次执行此函数

    function onecarry(img) {

        var scrolltop = $(document).scrollTop()

        var browser = document.documentElement.clientHeight; //获取浏览器中的可视区域

        var offsettop = img.offset().top;

        var imgheight = img.height()

        if (offsettop > scrolltop && offsettop < (scrolltop + browser) || offsettop < scrolltop && offsettop > (scrolltop - imgheight)) {

            voluation(img)

        }

    }

</script>

</html>

相关文章