js高频手写题

前端菜鸟丶Ndie

已于 2022-08-30 16:50:23 修改

阅读量124

点赞数

文章标签： javascript 前端 html

于 2022-08-30 16:44:25 首次发布

本文链接：https://blog.csdn.net/m0_46978096/article/details/126607507

版权

图片懒加载
当图片未到可视区域就不加载
利用自定义属性，浏览器可视区域内，图片位置，滚动来实现懒加载

<img src="./loading.png" data-src="https://t8.baidu.com/it/u=1768142310,147389072&fm=30&app=106&size=f242,150&n=0&f=JPEG&fmt=auto?s=88DAB6FA56A3EAFD001C160E03006056&sec=1652806800&t=f53aa2bdeb347e78deacae794097035b" />
<img src="./loading.png" data-src="https://t8.baidu.com/it/u=1768142310,147389072&fm=30&app=106&size=f242,150&n=0&f=JPEG&fmt=auto?s=88DAB6FA56A3EAFD001C160E03006056&sec=1652806800&t=f53aa2bdeb347e78deacae794097035b" />
<img src="./loading.png" data-src="https://t8.baidu.com/it/u=1768142310,147389072&fm=30&app=106&size=f242,150&n=0&f=JPEG&fmt=auto?s=88DAB6FA56A3EAFD001C160E03006056&sec=1652806800&t=f53aa2bdeb347e78deacae794097035b" />
<img src="./loading.png" data-src="https://t8.baidu.com/it/u=1768142310,147389072&fm=30&app=106&size=f242,150&n=0&f=JPEG&fmt=auto?s=88DAB6FA56A3EAFD001C160E03006056&sec=1652806800&t=f53aa2bdeb347e78deacae794097035b" />

<script>
      const allimg = document.querySelectorAll("img");//获取所有的img
      function lazyImg() {
        const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;//滚动条位置
        const viewHeight = window.innerHeight; //浏览器可视高度
        for (let i = 0; i < allimg.length; i++) {
        	//-200是为了让你看的更明显，实际用时可以去掉
          if (allimg[i].offsetTop < viewHeight + scrollTop - 200) {
            allimg[i].src = allimg[i].getAttribute("data-src");//获取该属性并赋值给src
          }
        }
      }
      lazyImg();//让一开始就在可视区域类的图片加载出来
      window.onscroll = lazyImg;//监听浏览器滚动
    </script>