js图片加载效果实例代码（延迟加载+瀑布流加载）

2023年6月11日上午1:16 • JavaScript

JS图片加载效果是前端开发中非常重要的一环，以提升用户体验为目标，延迟加载和瀑布流加载成为了当前常见的两种图片加载效果。

什么是延迟加载

延迟加载，也叫懒加载，在一个页面中存在很多图片时，没有必要一次性加载所有图片，而是可以只加载第一屏或者可见区域内的图片，当用户向下滚动页面，再异步地去加载剩下的图片。这样可以有效减少页面的加载时间。

实现延迟加载的代码示例

假如以下代码是需要延迟加载的图片：

<img data-url="http://example.com/image.jpg" alt="示例图片">

我们可以使用以下JS代码实现图片的延迟加载：

document.addEventListener("DOMContentLoaded", function() {
  const images = document.querySelectorAll("img[data-url]");
  const options = {
    rootMargin: "0px",
    threshold: 0
  };

  const loadImage = function(image) {
    image.setAttribute("src", image.getAttribute("data-url"));
    image.onload = function() {
      image.removeAttribute("data-url");
    };
  };

  const observer = new IntersectionObserver(function(entries, observer) {
    entries.forEach(function(entry) {
      if (entry.isIntersecting) {
        loadImage(entry.target);
        observer.unobserve(entry.target);
      }
    });
  }, options);

  images.forEach(function(image) {
    observer.observe(image);
  });
});

代码解释：

首先通过querySelectorAll选择所有需要延迟加载的图片，即使用data-url属性作为标志。
使用IntersectionObserverAPI，监听所有对象的交叉事件。当符合条件时，执行加载图片的方法。
当选定的图片进入“交叉状态”，即进入可视区域，就会调用该方法。

什么是瀑布流加载

瀑布流加载，也叫瀑布流布局，是指以瀑布流的形式摆放图片。即每列等宽不等高，图片按顺序排列，形成瀑布流。当达到页面底部时，再去获取更多的图片数据，动态增加页面内容。瀑布流加载是一种多列等宽布局形式，更适合于展示图片墙或产品展示。

实现瀑布流加载的代码示例

以下是一个简单的瀑布流加载实现示例：

<div id="waterfall">
  <img src="http://example.com/image1.jpg">
  <img src="http://example.com/image2.jpg">
  <img src="http://example.com/image3.jpg">
  ...
</div>

function createImage(url) {
  const img = document.createElement("img");
  img.src = url;
  document.getElementById("waterfall").appendChild(img);
}

function fetchImages(page) {
  const xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      const images = JSON.parse(xhr.responseText).data;
      images.forEach(function(image) {
        createImage(image.url);
      });
    }
  };
  xhr.open("GET", "/api/images?page=" + page);
  xhr.send();
}

let page = 1;
fetchImages(page);

window.addEventListener("scroll", function() {
  if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
    page++;
    fetchImages(page);
  }
});

以上代码实现了以下功能：