简单实现图片异步加载 - 小胖脸

网页图片的异步加载可以使用 JavaScript 实现。具体实现方式可以使用以下步骤：

将网页图片的 src 属性设置为一个占位符；
在 JavaScript 中，将图片的真实 URL 存储在自定义属性 data-src 中；
使用 Intersection Observer API 监听图片是否进入视口；
当图片进入视口时，将 data-src 的值赋给图片的 src 属性，即可开始加载图片。

以下是一个基本的实现代码：

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

const images = document.querySelectorAll('.lazyload');

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const image = entry.target;
      const src = image.getAttribute('data-src');
      image.setAttribute('src', src);
      observer.unobserve(image);
    }
  })
});

images.forEach(image => {
  observer.observe(image);
});

在实现过程中，我们将图片的真实 URL 存储在 data-src 属性中，然后使用 IntersectionObserver 监听图片的可见性。当图片进入视口时，我们获取其真实 URL 并赋值给 src 属性，即可加载图片。

这种方法可以显著减少页面加载时间，并提高用户体验。