图片懒加载 lazyLoad

图片懒加载

图片的延迟加载最常见的是只加载网页显示在屏幕中的图片，如果用户没有滚动到网页靠下的部分，那图片就不用显示了，节省HTTP请求和带宽，同时提高首屏的加载速度，提高用户体验。

具体思路是通过同一张图片占位,使用data-src 存储真实地址,然后在滚动时,判断element.offset().top <= $(window).height() + $(window).scrollTop(),如果符合条件,通过attr方法改变src,加载真实图片.

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>懒加载</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    ul {
      list-style: none;
    }

    img {
      height: 427px;
    }
  </style>
</head>

<body>
  <ul class="container">
    <li>
      <img src="http://via.placeholder.com/641x427" data-src='http://www.huaceys.com/images6/huacesheji_b_1.jpg'
        alt="">
    </li>
    <li>
      <img src="http://via.placeholder.com/641x427" data-src="http://www.huaceys.com/images6/huacesheji_b_2.jpg"
        alt="">
    </li>
    <li>
      <img src="http://via.placeholder.com/641x427" data-src="http://www.huaceys.com/images6/huacesheji_b_3.jpg"
        alt="">
    </li>
    <li>
      <img src="http://via.placeholder.com/641x427" data-src="http://www.huaceys.com/images6/huacesheji_b_4.jpg"
        alt="">
    </li>
    <li>
      <img src="http://via.placeholder.com/641x427" data-src="http://www.huaceys.com/images6/huacesheji_b_5.jpg"
        alt="">
    </li>
    <li>
      <img src="http://via.placeholder.com/641x427" data-src="http://www.huaceys.com/images6/huacesheji_b_6.jpg"
        alt="">
    </li>
    <li>
      <img src="http://via.placeholder.com/641x427" data-src="http://www.huaceys.com/images6/huacesheji_b_7.jpg"
        alt="">
    </li>
    <li>
      <img src="http://via.placeholder.com/641x427" data-src="http://www.huaceys.com/images6/huacesheji_b_8.jpg"
        alt="">
    </li>
  </ul>
  <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>

  <script>
    function start(params) {
      $('.container img:not([data-isLoaded])').each(function () {
        var $node = $(this)
        if (isShow($node)) {
          // 延迟500ms
          // setTimeout(() => {
          //   loadImg($node)
          // }, 500);
          
          loadImg($node)
        }
      })
    
    }
    // 返回判断结果
    function isShow($node) {
      // offsetTop 当前元素相对于其 offsetParent 元素的顶部的距离。
      // $(window).height() 浏览器窗口的视口的高度。
      // $(window).scrollTop() 是这个元素的顶部到它的最顶部可见内容（的顶部）的距离的度量。
      return $node.offset().top <= $(window).height() + $(window).scrollTop()
    }
    // 加载图片
    function loadImg($img) {
      $img.attr('src', $img.attr('data-src'))
      $img.attr('data-isLoaded', 1)
    }
    //初始化
    start()
    // 绑定事件
    $(window).on('scroll', function () {
      start()
    })
  </script>
</body>

</html>