实现图片懒加载

前言

       图片懒加载是网页中常见的一种简单的技术，可以减轻页面首次加载的压力，是一种常见的页面性能优化的方式，这次就来看看它的究竟是如何实现的。

原理

图片懒加载的原理十分的简单，就是页面中的图片并不会一次性全部加载完，而是在我们能看到这张图片的时候这张图片才会进行加载，而在加载这张图片之前，先用一张较小的图片来占位置，真正的图片地址放在自定义属性data-src中，需要加载时就将图片的src换成data-src。而如何判断我们有没有看见图片呢，这个可以通过比较图片距离网页顶部的距离和网页已经滚动的距离加上窗口的高度来实现，这样就实现了图片的懒加载。

实现

html:

<div class="main">
  <ul class="imgList">
    <li><img src="./images/loading.png" data-src="./images/beach-exotic-holiday-248797.jpg" alt=""></li>
    <li><img src="./images/loading.png" data-src="./images/blur-calm-waters-dawn-395198.jpg" alt=""></li>
    <li><img src="./images/loading.png" data-src="./images/close-up-foliage-green-797797.jpg" alt=""></li>
    <li><img src="./images/loading.png" data-src="./images/cool-wallpaper-dawn-hd-wallpaper-66997.jpg" alt=""></li>
    <li><img src="./images/loading.png" data-src="./images/crop-cropland-daylight-1447092.jpg" alt=""></li>
    <li><img src="./images/loading.png" data-src="./images/dark-flash-lightning-1114690.jpg" alt=""></li>
    <li><img src="./images/loading.png" data-src="./images/daylight-dirt-road-forest-163703.jpg" alt=""></li>
    <li><img src="./images/loading.png" data-src="./images/flowers-4352530_1280.jpg" alt=""></li>
    <li><img src="./images/loading.png" data-src="./images/hd-wallpaper-mountain-range-mountains-114979.jpg" alt="">
    </li>
    <li><img src="./images/loading.png" data-src="./images/stockvault-autumn-lake135956.jpg" alt=""></li>
  </ul>
</div>

css:

.imgList {
  width: 800px;
  margin: 0 auto;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}

img {
  width: 400px;
  height: 200px;
}

js:

$(function () {
  // 进入页面时也需要调用一次
  start();

  //当页面滚动时触发
  $(window).on('scroll', function () {// 滚动时，显示对应图片
    start()
  })

  //判断图片是否需要显示
  function isShow($node) {
    return $node.offset().top <= $(window).height() + $(window).scrollTop();
  }

  // 显示图片
  function loadImg($img) {
    $img.attr('src', $img.attr('data-src'));
    $img.attr('data-isLoaded', 1);
  }

  //调用图片懒加载
  function start() {
    $('.imgList img').not('[data-isLoaded]').each(function () {
      const $node = $(this);
      if (isShow($node)) {
        loadImg($node);
      }
    })
  }
})

总结

图片懒加载是一个常见的简单又实用的一个小功能。

这里也可以再通过函数节流来对性能进行一定的优化