原生JS实现图片懒加载效果

最新推荐文章于 2021-07-20 22:50:39 发布

海绵泡泡

最新推荐文章于 2021-07-20 22:50:39 发布

阅读量151

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/qq_41402809/article/details/104374122

版权

js 专栏收录该内容

13 篇文章 2 订阅

订阅专栏

原生JS实现图片防抖：

未加入函数节流以后补上

涉及知识点：

        Node.children：返回指定节点的所有element子节点,即返回节点元素
        Node.childNodes：返回指定节点的所有子节点，包括节点元素和文本元素

可以用getBoundingClientRect() 它可以获得矩形四条边框，对于当前视口左上角的left right top bottom

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：  浏览器高为 window.innerHeight

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片懒加载</title>
    <style>
        .container{
            width: 800px;
            margin: 600px auto;
        }
        .imageBox{
            margin-top: 20px;
            width: 100%;
            height: 130px;
        }
        .imgitem{
            float: left;
            width: 218px;
            height: 130px;
            margin-right: 10px;
        }
        img{
            display: none;
            width: 218px;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="imageBox">
        <div class="imgitem"><img src="" alt="" data-img="image/pro2.png"></div>
        <div class="imgitem"><img src="" alt="" data-img="image/pro3.png"></div>
        <div class="imgitem"><img src="" alt="" data-img="image/pro4.png"></div>
    </div>
    <div class="imageBox">
        <div class="imgitem"><img src="" alt="" data-img="image/pro2.png"></div>
        <div class="imgitem"><img src="" alt="" data-img="image/pro3.png"></div>
        <div class="imgitem"><img src="" alt="" data-img="image/pro4.png"></div>
    </div>
    <div class="imageBox">
        <div class="imgitem"><img src="" alt="" data-img="image/pro2.png"></div>
        <div class="imgitem"><img src="" alt="" data-img="image/pro3.png"></div>
        <div class="imgitem"><img src="" alt="" data-img="image/pro4.png"></div>
    </div>
    <div class="imageBox">
        <div class="imgitem"><img src="" alt="" data-img="image/pro2.png"></div>
        <div class="imgitem"><img src="" alt="" data-img="image/pro3.png"></div>
        <div class="imgitem"><img src="" alt="" data-img="image/pro4.png"></div>
    </div>
    <div class="imageBox">
        <div class="imgitem"><img src="" alt="" data-img="image/pro2.png"></div>
        <div class="imgitem"><img src="" alt="" data-img="image/pro3.png"></div>
        <div class="imgitem"><img src="" alt="" data-img="image/pro4.png"></div>
    </div>
</div>
</body>

<script>

    function show() {

        var $imageBox = document.getElementsByClassName('imageBox'),
            // 对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：  浏览器高为 window.innerHeight
            
            //！！！！！！！！！！！！！！
            windowLength = window.innerHeight + document.documentElement.scrollTop;
         

        for(let i=0; i<$imageBox.length; i++){
        
           //！！！！！！！！！！！！！！
            let imgLength = $imageBox[i].offsetHeight+$imageBox[i].offsetTop;
          
            if (imgLength<=windowLength && $imageBox[i].getAttribute('isLoad') !== 'true'){
                //也可以用getBoundingClientRect() 它可以获得 矩形四条边框 对于当前视口左上角的left right top bottom
                // console.log($imageBox[i].getBoundingClientRect().top)

                $imageBox[i].setAttribute('isLoad','true');
                //Node.children：返回指定节点的所有element子节点,即返回节点元素
                // Node.childNodes：返回指定节点的所有子节点，包括节点元素和文本元素
                let $imgItemBox = $imageBox[i].children;
                // console.log($img.src)
                for(let j=0; j<$imgItemBox.length; j++){
                    let $img = $imgItemBox[j].children;
                    // console.log($img[0].getAttribute('data-img'));
                    $img[0].setAttribute('src',$img[0].getAttribute('data-img'));
                    $img[0].onload = function () {
                        $img[0].style.display = 'block';
                        $img[0].setAttribute('isLoad','true');
                    }

                }

            }
        }
    }

    window.onload = function () {
        // console.log('load')
        show();
    }
    window.onscroll = function () {
        // console.log('scroll')
        show()
    }

</script>
</html>

海绵泡泡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生JS实现图片懒加载效果

原生JS实现图片防抖：未加入函数节流以后补上涉及知识点： Node.children：返回指定节点的所有element子节点,即返回节点元素 Node.childNodes：返回指定节点的所有子节点，包括节点元素和文本元素可以用getBoundingClientRect() 它可以获得矩形四条边框，对于当前视口左上角的left right top ...
复制链接

扫一扫

专栏目录