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

<!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>
基于Jquery的（可视区域，向上滚动向下滚动两种）图片懒加载

猜你喜欢
