Jquery懒加载

最新推荐文章于 2022-09-12 22:57:05 发布

是欢欢啊

最新推荐文章于 2022-09-12 22:57:05 发布

阅读量211

点赞数

分类专栏： Jquery demo

本文链接：https://blog.csdn.net/bznhlhh/article/details/118601684

版权

Jquery demo 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!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">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <title>图片懒加载</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .img-wp {
            width: 765px;
            margin: 0 auto;
        }
    </style>
</head>

<body>


    <div class="img-wp">
        <!-- 使用data-*属性存放图片路径 -->
        <!-- src 属性可为空，或放小图 -->
        <img src="" data-src="../images/01.jpg" alt="" width="765" height="574">
        <img src="" data-src="../images/02.jpeg" alt="" width="765" height="574">
        <img src="" data-src="../images/03.jpeg" alt="" width="765" height="574">
        <img src="" data-src="../images/04.jpeg" alt="" width="765" height="574">
        <img src="" data-src="../images/05.jpeg" alt="" width="765" height="574">
        <img src="" data-src="../images/06.jpeg" alt="" width="765" height="574">
    </div>

    <script>
        ! function(window, document, $, undefined) {
            // 页面滚动时触发
            function lazyScroll() {
                $('img').each(function(index, item) {
                    let bTop = $(this).offset().top;
                    let scrollHeight = $(':root').scrollTop();
                    let screenHeight = window.innerHeight;
                    // 滚动区域及可视范围进行判断
                    if ((scrollHeight + screenHeight) > bTop) {
                        $(this).attr('src', $(this).data('src'))
                    }
                })
            }
            // 页面加载完成时执行一次
            lazyScroll()
            $(window).on('scroll', lazyScroll)
        }(window, document, jQuery)
    </script>
</body>

</html>

是欢欢啊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery懒加载

<!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"> <script src.
复制链接

扫一扫