JavaScript实现页面滚动图片加载(仿lazyload效果)

概述

在网站中，经常会有长页式的页面，滚动页面时会不断加载图片，但是如果在页面的初次加载时一次性加载所有的图片，会给用户带来不必要的流量浪费，同时也会影响页面加载速度。因此，我们可以通过JavaScript实现页面滚动图片加载，去实现对用户体验的优化。

本攻略将介绍一种基于lazyload思路的实现方法，让图片在页面滚动时才进行加载，并且只加载当前可视区域内的图片，这样就可以避免因网页中大量的图片导致的性能问题。

实现方式

为图片设置占位符
获取浏览器窗口的高度，计算当前可视区域内的图片
监听window的scroll事件，滚动时计算出当前可视区域内的图片，等待图片完成加载
加载完成后将其插入页面，用占位符替换掉

示例说明

示例1：使用jQuery实现

HTML代码：

<div class="container">
  <div class="image">
    <img src="placeholder.png" data-src="image1.jpg" alt="">
  </div>
  <div class="image">
    <img src="placeholder.png" data-src="image2.jpg" alt="">
  </div>
  <div class="image">
    <img src="placeholder.png" data-src="image3.jpg" alt="">
  </div>
  <div class="image">
    <img src="placeholder.png" data-src="image4.jpg" alt="">
  </div>
  <div class="image">
    <img src="placeholder.png" data-src="image5.jpg" alt="">
  </div>
  <div class="image">
    <img src="placeholder.png" data-src="image6.jpg" alt="">
  </div>
  <div class="image">
    <img src="placeholder.png" data-src="image7.jpg" alt="">
  </div>
  <div class="image">
    <img src="placeholder.png" data-src="image8.jpg" alt="">
  </div>
  <div class="image">
    <img src="placeholder.png" data-src="image9.jpg" alt="">
  </div>
  <div class="image">
    <img src="placeholder.png" data-src="image10.jpg" alt="">
  </div>
</div>

JavaScript代码：

$(function() {
  $(window).on('scroll', function() {
    $('.image').each(function(index) {
      if(!$(this).data('loaded') && inViewport(this)) {
        var $img = $(this).find('img');
        $img.attr('src', $img.data('src'))
            .on('load', function() {
              $(this).parent().removeClass('loading');
            });
        $(this).data('loaded', true);
        $(this).addClass('loading');
      }
    });
  });

  function inViewport(element) {
    var rect = element.getBoundingClientRect();
    return (
      rect.bottom >= 0 &&
      rect.right >= 0 &&
      rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.left <= (window.innerWidth || document.documentElement.clientWidth)
    );
  }
});

在这个示例中，我们为每个图片设置了一个占位符，使用data-src属性来存储真实图片的地址。当滚动到图片所在的可视区域内时，将占位符替换成真实的图片，并为其添加一个loading的class。

示例2：使用原生JavaScript实现

HTML代码：

<div class="container">
  <div class="image">
    <img src="placeholder.png" data-src="image1.jpg" alt="">
  </div>
  <div class="image">
    <img src="placeholder.png" data-src="image2.jpg" alt="">
  </div>
  <div class="image">
    <img src="placeholder.png" data-src="image3.jpg" alt="">
  </div>
  <div class="image">
    <img src="placeholder.png" data-src="image4.jpg" alt="">
  </div>
  <div class="image">
    <img src="placeholder.png" data-src="image5.jpg" alt="">
  </div>
  <div class="image">
    <img src="placeholder.png" data-src="image6.jpg" alt="">
  </div>
  <div class="image">
    <img src="placeholder.png" data-src="image7.jpg" alt="">
  </div>
  <div class="image">
    <img src="placeholder.png" data-src="image8.jpg" alt="">
  </div>
  <div class="image">
    <img src="placeholder.png" data-src="image9.jpg" alt="">
  </div>
  <div class="image">
    <img src="placeholder.png" data-src="image10.jpg" alt="">
  </div>
</div>

JavaScript代码：

window.addEventListener('scroll', function() {
  document.querySelectorAll('.image:not(.loading)').forEach(function(element) {
    if(inViewport(element)) {
      var img = element.querySelector('img');
      img.src = img.dataset.src;
      element.classList.add('loading');
      img.addEventListener('load', function() {
        element.classList.remove('loading');
      });
    }
  });
});

function inViewport(element) {
  var rect = element.getBoundingClientRect();
  return (
    rect.bottom >= 0 &&
    rect.right >= 0 &&
    rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.left <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

在这个示例中，我们也为每个图片设置了一个占位符，使用data-src属性来存储真实图片的地址。当滚动到图片所在的可视区域内时，将占位符替换成真实的图片，并为其添加一个loading的class。