原生js实现懒加载

最新推荐文章于 2022-04-20 22:10:23 发布

大理无名道路

最新推荐文章于 2022-04-20 22:10:23 发布

阅读量123

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/qq_34228805/article/details/103127734

版权

web 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

效果如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <script src="lazyload.js"></script>
</head>
<body>

    <h3>图片懒加载原理</h3>

    <div class="imgs">
        <div>
            <img src="./img/load.gif" data-src="./img/1.jpg">
        </div>
        <div>
            <img src="./img/load.gif" data-src="./img/2.jpg">
        </div>
        <div>
            <img src="./img/load.gif" data-src="./img/3.jpg">
        </div>
        <div>
            <img src="./img/load.gif" data-src="./img/4.jpg">
        </div>
        <div>
            <img src="./img/load.gif" data-src="./img/5.jpg">
        </div>
    </div>
    
</body>
</html>

<style>
    h3{
        text-align: center;
    }
    .imgs{
        width: 300px;
        margin: 0 auto;
        height: 200px;
    }
    .imgs div{
        width: 300px;
        border: 1px solid #b1b1bb;
        height: 200px;
    }
    .imgs div img{
        display: block;
        width: 300px;
        height: 200px;
    }

</style>

JS代码如下：

window.onload=function(){

    var imgs=document.querySelectorAll('img'); //获取所有的img元素
    
    //获取元素到浏览器的高度
    function getOffset(e){
        
        /*
            //父级有定位
            var t=e.offsetTop;
            while(e=e.offsetParent){
                
                t+=e.offsetTop
            }
            return t;
        */

        return e.offsetTop;
    
    }


 function lazyLoad(imgs){
    
    var t=window.innerHeight;  //获取浏览器屏幕高度
    var s=document.documentElement.scrollTop || document.body.scrollTop  //获取滚动条的高度

    for(var i=0;i<imgs.length;i++){  
        
        if((t+s)>getOffset(imgs[i]){//图片到浏览器顶部的高度< 屏幕的可视高度+滚动的高度
            
            (function(i){
                
                setTimeout(function(){
                    
                    //图形加载图片或其他资源
                    var tmp=new Images();
                    tmp.src=imgs[i].getAttribute("data-src");//获取属性
                    tmp.onload=function(){
                        imgs[i].src=imgs[i].getAttribute("data-src");
                    }
                
                },2000)

            })(i)  //闭包
            
        }
    
    }

}

Onlazyload(imgs);

window.onscroll=function(){//监听滚动条事件
    Onlazyload(imgs);
}




}