原生JS的（可视区域，向上滚动向下滚动两种）图片懒加载

<!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>
    var imgs = []
    imgs = document.getElementsByTagName('img')
    for(var i=0;i<imgs.length;i++){
        if (checkShow(imgs[i]) && !isLoaded(imgs[i])) {
            loadImg(imgs[i]);//加载当前img
        }
    }
    
    window.addEventListener('scroll', function () {//滚动的触发事件
        for(var i=0;i<imgs.length;i++){
            if (checkShow(imgs[i]) && !isLoaded(imgs[i])) {
                loadImg(imgs[i]);//加载当前img
            }
        }
    })

    function checkShow($img) { // 传入img对象
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度
        var windowHeight = document.documentElement.clientHeight; //可见区域高度
        var offsetTop = $img.offsetTop  //目标标签img相对于document顶部的位置
        var imgHeight = $img.height;    //获取图片高度，在向上滚动会用到，比如网页一打开就定位到了中间或底部，就会向上滚动
        if (offsetTop < (scrollTop + windowHeight) && (offsetTop+imgHeight) > scrollTop) { //在2个临界状态之间的就为出现在视野中的，只加载出现在视野中的图片
            return true;
        }
        return false;
    }

    function isLoaded($img) {
        return $img.getAttribute('data-imgurl') === $img.getAttribute('src'); //如果data-imgurl和src相等那么就是已经加载过了
    }

    function loadImg($img) {
        $img.src = $img.getAttribute('data-imgurl')  // 把自定义属性中存放的真实的src地址赋给src属性
        $img.style.cssText = "animation:fadeIn 1s" //类似fadeIn效果
    }

</script>
原生JS的（可视区域，向上滚动向下滚动两种）图片懒加载

猜你喜欢
