JS原生 实现图片懒加载

举报
达拉崩巴斑得贝迪卜多 发表于 2021/12/20 23:19:19 2021/12/20
【摘要】 重点集合 <div class="box"> <!-- 图片的src路径为空 lazyload="true" data-original 值为真实的图片地址 -...

重点集合

<div class="box"> 
      <!-- 图片的src路径为空   lazyload="true"    data-original 值为真实的图片地址 -->
       <img src=""  class="img" lazyload="true" data-original="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg">
    </div>

  
 
  • 1
  • 2
  • 3
  • 4
<script type="text/javascript">
    window.onload = function () {
      //获取当前浏览器的视口高度
      var viewHeight = document.documentElement.clientHeight;
      console.log(viewHeight)
      //鼠标滚动回调
      function lazyload() {
          var img = document.getElementsByClassName('img'); //获取所有图片集合
          console.log(img)
          //遍历图片集合
          for (let item of img) {
              //获取图片距视口顶部的距离
              var imgHeight = item.getBoundingClientRect();
              //判断当图片出现在视口160px时把地址放到src中,显示出图片
              if (imgHeight.top < (viewHeight - 360)) {
                  item.src = item.getAttribute("data-original")
                   console.log(item.src)
              }
          }
      }

      lazyload();    //页面加载时把当前视口中的图片加载进来
      document.addEventListener('scroll', lazyload);
  }
  </script>

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

HTML data-* 属性

使用 data-* 属性来嵌入自定义数据
所有主流浏览器都支持 data-* 属性
定义和用法
data-* 属性用于存储页面或应用程序的私有自定义数据。

data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。

存储的(自定义)数据能够被页面的 JavaScript 中利用,以创建更好的用户体验(不进行 Ajax 调用或服务器端数据库查询)。

data-* 属性包括两部分:

属性名不应该包含任何大写字母,并且在前缀 “data-” 之后必须有至少一个字符
属性值可以是任意字符串
注释:用户代理会完全忽略前缀为 “data-” 的自定义属性。

getBoundingClientRect 方法介绍

理解:getBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。

1.语法:这个方法没有参数。

        rectObject = object.getBoundingClientRect();

  
 
  • 1

2.返回值类型:

rectObject.top:元素上边到视窗上边的距离;

rectObject.right:元素右边到视窗左边的距离;

rectObject.bottom:元素下边到视窗上边的距离;

rectObject.left:元素左边到视窗左边的距离;

在这里插入图片描述

文章来源: lvsige.blog.csdn.net,作者:祥子的小迷妹,版权归原作者所有,如需转载,请联系作者。

原文链接:lvsige.blog.csdn.net/article/details/108736855

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200