快速实现JS图片懒加载(可视区域加载)示例代码

实现JS图片懒加载(可视区域加载)需要按照以下步骤进行：

第一步：为图片设置占位符

在HTML中，我们需要为需要懒加载的图片设置占位符，以及将图片的真实地址存储在自定义的data-src属性中，代码如下：

<img src="占位符" data-src="真实地址">

其中占位符可以是任何图片地址，例如：

<img src="placeholder.jpg" data-src="image.jpg">

第二步：编写JS代码实现懒加载

我们需要编写JS代码调用图片，并且在页面滚动到可视区域时再加载图片，代码如下：

function lazyLoad() {
  var images = document.querySelectorAll('img[data-src]'); //选择需要懒加载的图片
  var len = images.length;
  var n = 0;

  for (var i = 0; i < len; i++) {
    var rect = images[i].getBoundingClientRect();

    if (rect.top < window.innerHeight) { //图片进入可视区域
      var img = new Image();
      img.src = images[i].getAttribute('data-src');
      img.onload = function() {
        images[n].src = this.src;
        n++;
      }
      images[i].removeAttribute('data-src');
    }
  }
}

lazyLoad(); //首次加载页面时，先加载所有可视区域内的图片

window.addEventListener('scroll', lazyLoad); //监听滚动事件，动态加载图片

这段代码中，我们选择了所有含有data-src属性的图片，并使用getBoundingClientRect()方法获取图片相对于窗口的位置和大小。然后，如果图片进入可视区域，我们就去加载这张图片，通过img.onload回调函数来保证图片加载完整。最后，我们移除data-src属性，避免重复加载图片。

示例说明

示例一：图片懒加载

为了更好地说明图片懒加载，我们可以使用一个具体的示例。下面是一个使用懒加载技术的图片展示页面：

<div id="image-container">
  <img src="placeholder.jpg" data-src="image1.jpg">
  <img src="placeholder.jpg" data-src="image2.jpg">
  <img src="placeholder.jpg" data-src="image3.jpg">
  <img src="placeholder.jpg" data-src="image4.jpg">
  <img src="placeholder.jpg" data-src="image5.jpg">
  <img src="placeholder.jpg" data-src="image6.jpg">
</div>

这里我们使用同一个占位符placeholder.jpg来替代所有图片，data-src属性用来存储图片的真实地址。接下来，我们使用上面的JS代码进行懒加载，实现逐个加载图片的效果。

示例二：模拟长列表

如果页面上有许多图片需要进行懒加载，我们可以使用IntersectionObserver和虚拟列表技术来避免对性能的影响。下面是一个模拟长列表的示例代码：

<div id="image-container">
  <ul>
    <li><img src="placeholder.jpg" data-src="image1.jpg"></li>
    <li><img src="placeholder.jpg" data-src="image2.jpg"></li>
    <!-- more <li> elements -->
    <li><img src="placeholder.jpg" data-src="image1000000.jpg"></li>
  </ul>
</div>

这里我们使用<ul>和<li>创建了一个长列表，每个<li>中都包含一张图片。为了避免长列表占用过多的内存和性能，我们可以使用虚拟列表技术来优化，只渲染可视区域内的列表项。同时，我们也可以使用IntersectionObserver来监听可视区域内的图片是否进入视野，从而减少手动滚动的操作，提高用户体验。