基于Jquery的（可视区域，向上滚动向下滚动两种）图片懒加载

ゞ浴缸里的玫瑰 2022-05-10 06:24 191阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            * {
                padding: 0px;
                margin: 0px;
            }
    
            html,
            body {
                width: 100%;
                min-height: 100%;
            }
    
            img {
                border: none;
                vertical-align: middle;
                height: 400px;
                width: 400px;
            }
            @keyframes fadeIn {
                0% {
                    opacity: 0.5;
                }
                100% {
                    opacity: 1;
                }
            }
    
        </style>
    </head>
    <body>
    <img src="" data-src="111.jpg" alt=""><br/>
    <img src="" data-src="111.jpg" alt=""><br/>
    <img src="" data-src="111.jpg" alt=""><br/>
    <img src="" data-src="111.jpg" alt=""><br/>
    <img src="" data-src="111.jpg" alt=""><br/>
    <img src="" data-src="111.jpg" alt=""><br/>
    <img src="" data-src="111.jpg" alt=""><br/>
    <img src="" data-src="111.jpg" alt=""><br/>
    <img src="" data-src="111.jpg" alt=""><br/>
    <img src="" data-src="111.jpg" alt=""><br/>
    <img src="" data-src="111.jpg" alt=""><br/>
    <img src="" data-src="111.jpg" alt=""><br/>
    <img src="" data-src="111.jpg" alt=""><br/>
    <img src="" data-src="111.jpg" alt=""><br/>
    </body>
    </html>
    <script
            src="https://code.jquery.com/jquery-2.2.4.min.js"
            integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
            crossorigin="anonymous"></script>
    <script>
        $('img').each(function () {//在未触发滚动事件时先判断图片是否已经出现在视窗中，打开页面时先遍历一次
            if (checkShow($(this)) && !isLoaded($(this))) {
                loadImg($(this));//加载当前img
            }
        })
    
        $(window).on('scroll', function () {//滚动的触发事件
            $('img').each(function () {//遍历img标签
                if (checkShow($(this)) && !isLoaded($(this))) {
                    loadImg($(this));//加载当前img
                }
            })
        })
    
        function checkShow($img) { // 传入img对象
            var scrollTop = $(window).scrollTop();  //即页面向上滚动的距离
            var windowHeight = $(window).height(); // 浏览器自身的高度
            var offsetTop = $img.offset().top;  //目标标签img相对于document顶部的位置
            var imgHeight = $img.height();
    
    //        console.log(imgHeight);
            if (offsetTop < (scrollTop + windowHeight) && (offsetTop+imgHeight) > scrollTop) { //在2个临界状态之间的就为出现在视野中的
                return true;
            }
            return false;
        }
    
        function isLoaded($img) {
            return $img.attr('data-imgurl') === $img.attr('src'); //如果data-imgurl和src相等那么就是已经加载过了
        }
    
        function loadImg($img) {
            $img.attr('src', $img.attr('data-imgurl')); // 把自定义属性中存放的真实的src地址赋给src属性
    
    //            $img.style.cssText = "transition: 1s; opacity: 1;" //相当于fadein
            $img.css("animation",'fadeIn 1s')
    
        }
    
    </script>