signed

QiShunwang

“诚信为本、客户至上”

原生js-图片懒加载

2021/6/24 20:21:13   来源:

图片懒加载

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div>
    <div>
      <h1>哈哈哈哈哈</h1>
      <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈韩国哈哈哈</p>
      <img src="./f9198618367adab46005ce688fd4b31c8601e4c0.gif" id="imgsrc"
        data-url="https://tse4-mm.cn.bing.net/th/id/OIP-C.rhEgA91PdLe0WmQ9HyGB6AHaE6?w=301&h=199&c=7&o=5&dpr=1.25&pid=1.7">
    </div>
    <div>
      <h1>嘿嘿嘿嘿嘿</h1>
      <p>嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿</p>
      <img src="./f9198618367adab46005ce688fd4b31c8601e4c0.gif" id="imgsrc"
        data-url="https://tse4-mm.cn.bing.net/th/id/OIP-C.MPabZydnCMpMAurLOYYQTQAAAA?w=116&h=185&c=7&o=5&dpr=1.25&pid=1.7">
    </div>
    <div>
      <h1>呵呵呵呵呵</h1>
      <p>呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵</p>
      <img src="./f9198618367adab46005ce688fd4b31c8601e4c0.gif" id="imgsrc"
        data-url="https://tse4-mm.cn.bing.net/th/id/OIP-C.0UEwUK9S21cKs57nW817dAAAAA?w=162&h=183&c=7&o=5&dpr=1.25&pid=1.7">
    </div>
    <div>
      <h1>哦哦哦哦哦</h1>
      <p>哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦</p>
      <img src="./f9198618367adab46005ce688fd4b31c8601e4c0.gif" id="imgsrc"
        data-url="https://tse3-mm.cn.bing.net/th/id/OIP-C.qgciVXWXEmDdtD-6arlGrwHaFj?w=218&h=183&c=7&o=5&dpr=1.25&pid=1.7">
    </div>
    <div>
      <h1>乐乐Elle了</h1>
      <p>乐乐Elle了乐乐Elle了乐乐Elle了乐乐Elle了乐乐Elle了</p>
      <img src="./f9198618367adab46005ce688fd4b31c8601e4c0.gif" id="imgsrc"
        data-url="https://tse1-mm.cn.bing.net/th/id/OIP-C.vEKHyINNjqDMUiGPG2hZqQHaE8?w=246&h=180&c=7&o=5&dpr=1.25&pid=1.7">
    </div>
  </div>
</body>
<script>
  var image = document.querySelectorAll('#imgsrc')
  function imglazy(image, distance) {
    image.forEach(item => {
      if (item.offsetTop < window.innerHeight + window.pageYOffset + distance) {
        item.src = item.dataset.url;
      }
    })
  }
  imglazy(image, 150)

  window.onscroll = throttle(imglazy, 1000)

  function throttle(imglazy, time) {
    let timer = null
    return function () {
      if (timer) { return }
      timer = setTimeout(() => {
        imglazy(image, 150)
        timer = null
      }, time)
    }
  }
</script>

</html>
如果出现图片一直重复加载的情况和懒加载失败,图片一次性加载出来的情况,可以尝试下面的方式
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
  	// 因为offsetTop是以它最近的带定位的的父元素为参照点,所以当没有带有定位的父元素时,会一直往上找,
  	// 直到找到body,有时会出现因为body没设置宽高,所以offsetTop的值有问题的情况,导致效果不对
    body {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  <div>
    <div>
      <h1>哈哈哈哈哈</h1>
      <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈韩国哈哈哈</p>
      <img src="./f9198618367adab46005ce688fd4b31c8601e4c0.gif" id="imgsrc"
        data-url="https://tse4-mm.cn.bing.net/th/id/OIP-C.rhEgA91PdLe0WmQ9HyGB6AHaE6?w=301&h=199&c=7&o=5&dpr=1.25&pid=1.7">
    </div>
    <div>
      <h1>嘿嘿嘿嘿嘿</h1>
      <p>嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿</p>
      <img src="./f9198618367adab46005ce688fd4b31c8601e4c0.gif" id="imgsrc"
        data-url="https://tse4-mm.cn.bing.net/th/id/OIP-C.MPabZydnCMpMAurLOYYQTQAAAA?w=116&h=185&c=7&o=5&dpr=1.25&pid=1.7">
    </div>
    <div>
      <h1>呵呵呵呵呵</h1>
      <p>呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵</p>
      <img src="./f9198618367adab46005ce688fd4b31c8601e4c0.gif" id="imgsrc"
        data-url="https://tse4-mm.cn.bing.net/th/id/OIP-C.0UEwUK9S21cKs57nW817dAAAAA?w=162&h=183&c=7&o=5&dpr=1.25&pid=1.7">
    </div>
    <div>
      <h1>哦哦哦哦哦</h1>
      <p>哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦</p>
      <img src="./f9198618367adab46005ce688fd4b31c8601e4c0.gif" id="imgsrc"
        data-url="https://tse3-mm.cn.bing.net/th/id/OIP-C.qgciVXWXEmDdtD-6arlGrwHaFj?w=218&h=183&c=7&o=5&dpr=1.25&pid=1.7">
    </div>
    <div>
      <h1>乐乐Elle了</h1>
      <p>乐乐Elle了乐乐Elle了乐乐Elle了乐乐Elle了乐乐Elle了</p>
      <img src="./f9198618367adab46005ce688fd4b31c8601e4c0.gif" id="imgsrc"
        data-url="https://tse1-mm.cn.bing.net/th/id/OIP-C.vEKHyINNjqDMUiGPG2hZqQHaE8?w=246&h=180&c=7&o=5&dpr=1.25&pid=1.7">
    </div>
  </div>
</body>
<script>
  var image = document.querySelectorAll('#imgsrc')
  var n = 0; //存储图片加载到的位置,避免每次都从第一张图片开始遍历
  function imglazy(image, distance) {
    for (var i = n; i < imgArr.length; i++) {
      if (item.offsetTop < window.innerHeight + window.pageYOffset + distance) {
        if (imgArr[i].getAttribute('src') == '') {
          imgArr[i].src = imgArr[i].getAttribute('data-src')
        }
        n = i + 1
      }
    }
  imglazy(image, 150)

  window.onscroll = throttle(imglazy, 1000)

  function throttle(imglazy, time) {
    let timer = null
    return function () {
      if (timer) { return }
      timer = setTimeout(() => {
        imglazy(image, 150)
        timer = null
      }, time)
    }
  }
</script>

</html>