js 实现图片懒加载

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    img {
      width: 980px;
      height: 551px;
    }
  </style>
</head>
<body>
  <img src="" alt="" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607340556942&di=dab46b9203e21c70c92b5b1f5b5d906f&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F22%2F20180822204542_ozqpw.jpg">
  <img src="" alt="" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607340556942&di=dab46b9203e21c70c92b5b1f5b5d906f&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F22%2F20180822204542_ozqpw.jpg">
  <img src="" alt="" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607340556942&di=dab46b9203e21c70c92b5b1f5b5d906f&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F22%2F20180822204542_ozqpw.jpg">
  <img src="" alt="" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607340556942&di=dab46b9203e21c70c92b5b1f5b5d906f&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F22%2F20180822204542_ozqpw.jpg">
  <img src="" alt="" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607340556942&di=dab46b9203e21c70c92b5b1f5b5d906f&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F22%2F20180822204542_ozqpw.jpg">
  <img src="" alt="" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607340556942&di=dab46b9203e21c70c92b5b1f5b5d906f&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F22%2F20180822204542_ozqpw.jpg">
  <img src="" alt="" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607340556942&di=dab46b9203e21c70c92b5b1f5b5d906f&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F22%2F20180822204542_ozqpw.jpg">
  <img src="" alt="" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607340556942&di=dab46b9203e21c70c92b5b1f5b5d906f&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F22%2F20180822204542_ozqpw.jpg">
  <img src="" alt="" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607340556942&di=dab46b9203e21c70c92b5b1f5b5d906f&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F22%2F20180822204542_ozqpw.jpg">
  <img src="" alt="" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607340556942&di=dab46b9203e21c70c92b5b1f5b5d906f&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F22%2F20180822204542_ozqpw.jpg">
  <img src="" alt="" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607340556942&di=dab46b9203e21c70c92b5b1f5b5d906f&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F22%2F20180822204542_ozqpw.jpg">
  <img src="" alt="" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607340556942&di=dab46b9203e21c70c92b5b1f5b5d906f&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F22%2F20180822204542_ozqpw.jpg">
  <img src="" alt="" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607340556942&di=dab46b9203e21c70c92b5b1f5b5d906f&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F22%2F20180822204542_ozqpw.jpg">
  <img src="" alt="" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607340556942&di=dab46b9203e21c70c92b5b1f5b5d906f&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F22%2F20180822204542_ozqpw.jpg">
  <img src="" alt="" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607340556942&di=dab46b9203e21c70c92b5b1f5b5d906f&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F22%2F20180822204542_ozqpw.jpg">
</body>
</html>
  //获取所有的img标签
  var imgDom = document.querySelectorAll('img')
  // 加载函数
  var imgShow = function() {
    // 循环所有img标签
    imgDom.forEach((item, i) => {
      // 通过判断 元素离顶部的距离 小于 页面被卷去的高度(滚动条滚动的高度) + 页面的可是高度的时候 对图片的src属性进行操作
      if(item.offsetTop < document.documentElement.scrollTop + window.innerHeight) {
        //通过data-src属性给src属性赋值
          item.src = item.getAttribute('data-src')
      }
    })
  }
  // 页面加载调用一次加载当前可视页面的图片加载
  imgShow()
  // 定义一个节流变量
  let only = null
  // 监听页面的滚动事件
  window.addEventListener('scroll', () => {
    // 当定时器存在的时候  先清除掉然后在开启新的  防抖的作用
    if (only) {
      clearTimeout(only)
    }
    // 不存在的时候直接开启新的
    only = setTimeout(() => {
      imgShow()
    }, 2000)
  })

推荐阅读更多精彩内容

  • 一、图片懒加载原理 浏览器是否发起请求图片是根据 中src的属性,所以实现原理就是在图片没有进入可视区域的时候将图...
    冰雪_666阅读 116评论 0 3
  • 一、原理 在浏览器滚动的时候,遍历所有图片,若图片在视窗可视区域,则加载该图片 将图片地址存放在自定义属性中(da...
    饥人谷_js_chen阅读 347评论 0 4
  • 编写html 编写css 编写js
    码农_e11c阅读 54评论 0 1
  • 有时候一个网页会包含很多的图片,例如淘宝京东这些购物网站,商品图片多只之又多,页面图片多,加载的图片就多。服务器压...
    藏清风阅读 75评论 0 0
  • 1、什么是懒加载? 懒加载就是延迟加载的意思,比如我们加载一个页面,这个页面很长很长,长到我们的浏览器可视区域装不...
    前端_Fn阅读 114评论 0 0