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>

<script>
  //获取所有的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)
  })
</script>
posted @ 2020-12-29 11:44  哎呀哦豁  阅读(77)  评论(0)    收藏  举报