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

Love The Way You Lie 2022-05-10 06:28 183阅读 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>
        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>