懒加载

最新推荐文章于 2024-04-23 18:09:29 发布

佛系孤单

最新推荐文章于 2024-04-23 18:09:29 发布

阅读量90

点赞数

分类专栏： web前端文章标签：懒加载

本文链接：https://blog.csdn.net/qq_43427385/article/details/100731875

版权

web前端专栏收录该内容

49 篇文章 1 订阅

订阅专栏

在这里插入图片描述

实现效果就是这样

<style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            border: 1px solid #000;
            width: 400px;
            margin: 0 auto;
            position: relative;
        }
        ul li{
            list-style: none;
            width: 400px;
            height: 200px;
            margin-top: 10px;
        }
        li img{
            width:400px;
            height: 200px;
            background-color: #eeeeee;
        }
    </style>

  <ul>
        <li>
            <img data-trueSrc="../assents/aa.jpg" src="">
        </li>
        <li>
            <img data-trueSrc="../assents/bb.jpg" src="">
        </li>
        <li>
            <img data-trueSrc="../assents/cc.jpg" src="">
        </li>
        <li>
            <img data-trueSrc="../assents/dd.jpg" src="">
        </li>
        <li>
            <img data-trueSrc="../assents/ee.jpg" src="">
        </li>
        <li>
            <img data-trueSrc="../assents/aa.jpg" src="">
        </li>
        <li>
            <img data-trueSrc="../assents/bb.jpg" src="">
        </li>
        <li>
            <img data-trueSrc="../assents/cc.jpg" src="">
        </li>
        <li>
            <img data-trueSrc="../assents/dd.jpg" src="">
        </li>
        <li>
            <img data-trueSrc="../assents/ee.jpg" src="">
        </li>
        <li>
            <img data-trueSrc="../assents/aa.jpg" src="">
        </li>
        <li>
            <img data-trueSrc="../assents/bb.jpg" src="">
        </li>
        <li>
            <img data-trueSrc="../assents/cc.jpg" src="">
        </li>
        <li>
            <img data-trueSrc="../assents/dd.jpg" src="">
        </li>
        <li>
            <img data-trueSrc="../assents/ee.jpg" src="">
        </li>
        <li>
            <img data-trueSrc="../assents/aa.jpg" src="">
        </li>
        <li>
            <img data-trueSrc="../assents/bb.jpg" src="">
        </li>
        <li>
            <img data-trueSrc="../assents/cc.jpg"  src="">
        </li>
        <li>
            <img data-trueSrc="../assents/dd.jpg" src="">
        </li>
        <li>
            <img data-trueSrc="../assents/ee.jpg" src="">
        </li>
        <li>
            <img data-trueSrc="../assents/aa.jpg" src="">
        </li>
        <li>
            <img data-trueSrc="../assents/bb.jpg" src="">
        </li>
        <li>
            <img data-trueSrc="../assents/cc.jpg" src="">
        </li>
        <li>
            <img data-trueSrc="../assents/dd.jpg" src="">
        </li>
        <li>
            <img data-trueSrc="../assents/ee.jpg" src="">
        </li>
    </ul>
<script>
    var imgs = document.images

   function show(){
       for(var i=0;i<imgs.length;i++){
           console.log(imgs[i].offsetTop)
           var st = document.documentElement.scrollTop || document.body.scrollTop
           if(imgs[i].offsetTop < (window.innerHeight + st)){
               imgs[i].src = imgs[i].getAttribute('data-trueSrc')
           }
       }
   }

   show()

    window.onscroll = function () {
        show()
    }
</script>