首页 > 代码库 > 原生JavaScript实现懒加载

原生JavaScript实现懒加载

2024-10-02 13:00:39   215人阅读

源码工程下载地址：https://github.com/blff122620/jsLibary/lazyLoad.html

实现原理就是通过scroll事件判断元素是否已经进入viewport

导入

lazyLoad.js

使用

inViewPort(item)即可 判断item是否在视口里，然后继续进行自己的逻辑就行了
<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>图片懒加载</title>
    <link rel="stylesheet" href="./static/css/reset.css">
    <link rel="stylesheet" href="./static/css/global.css">
    <style>
    .content {
        /*height: 1500px;*/
        width: 100%;
        overflow: hidden;
    }
    
    .content>img {
        border-radius: 5px;
        display: inline-block;
        margin: 200px 0 0 200px;
        
        width: 235px;
    }
    </style>
</head>

<body>
    <div class="content bg1" id="js-imgdiv">
        <img src="./static/img/lazyDefault.jpg" data-url="./static/img/1.jpg" alt="" >
        <img src="./static/img/lazyDefault.jpg" data-url="./static/img/2.jpg" alt="" >
        <img src="./static/img/lazyDefault.jpg" data-url="./static/img/3.jpg" alt="" >
        <img src="./static/img/lazyDefault.jpg" data-url="./static/img/4.jpg" alt="" >
        <img src="./static/img/lazyDefault.jpg" data-url="./static/img/5.jpg" alt="" >
        <img src="./static/img/lazyDefault.jpg" data-url="./static/img/6.jpg" alt="" >
    </div>

    <script type="text/javascript" src="./static/js/util.js"></script>
    <script type="text/javascript" src="./static/js/lazyLoad.js"></script>
    <script>
    (function() {
        window.onload=function(){

            var pics = $$("#js-imgdiv>img");
            setPicSrc(pics);
            window.onscroll = function(){
                setPicSrc(pics);
            };
            function setPicSrc(pics){
                pics.forEach(function(item){
                    if(inViewPort(item)){
                        setTimeout(function(){
                            item.src = item.dataset.url;
                        },200);//模拟一下网速慢的情况 
                    };   
                });
                        
            }

        };
    }());
    </script>
</body>

</html>

 

原生JavaScript实现懒加载


联系
我们