加载可视化图像
我们希望将这个开源项目提供给全世界的人。请帮助我们将教程的内容 翻译为你所掌握的语言 对应的版本。
è´­ä¹°EPUB/PDF
教程路线图
回到课程

加载可视化图像

重要程度: 4

假设我们有一个速度较慢的客户端，并且希望节省它们在移动端的流量。

为此，我们决定不立即显示图像，而是将其替换为占位符，如下所示：

<img src="placeholder.svg" width="128" height="128" data-src="real.jpg">

因此，最初所有图像均为 placeholder.svg。当页面滚动到用户可以看到图像位置时 —— 我们就会将 src 更改为 data-src 的 src，从而加载图像。

这是在 iframe 中的一个示例：

滚动它可以看到图像是“按需”加载的。

要求：

  • 加载页面时，屏幕上的那些图像应该在滚动之前立即加载。
  • 有些图像可能是常规图像，没有 data-src。代码不应该改动它们。
  • 一旦图像被加载，它就不应该在滚动进/出时被重新加载。

P.S. 如果你有能力，可以创建一个更高级的解决方案，以“预加载”当前位置下方/之后一页的图像。

P.P.S. 仅处理垂直滚动，不处理水平滚动。

打开一个任务沙箱。

onscroll 处理程序应该检查哪些图像是可见的，并显示它们。

我们还希望在页面加载时运行它，以检测即将可见的图像并加载它们。

该代码应该在文档加载完成时执行，以便可以访问文档内容。

或者将该代码放在 <body> 底部：

// ...页面内容在上面...

function isVisible(elem) {

  let coords = elem.getBoundingClientRect();

  let windowHeight = document.documentElement.clientHeight;

  // 顶部元素边缘可见吗？
  let topVisible = coords.top > 0 && coords.top < windowHeight;

  // 底部元素边缘可见吗？
  let bottomVisible = coords.bottom < windowHeight && coords.bottom > 0;

  return topVisible || bottomVisible;
}

showVisible() 函数使用通过 isVisible() 实现的可见性检查，来加载可见图像：

function showVisible() {
  for (let img of document.querySelectorAll('img')) {
    let realSrc = img.dataset.src;
    if (!realSrc) continue;

    if (isVisible(img)) {
      img.src = realSrc;
      img.dataset.src = '';
    }
  }
}

showVisible();
window.onscroll = showVisible;

P.S. 此解决方案还有一个 isVisible 的变体，可以“预加载”当前文档滚动上方/下方 1 页内的图像

使用沙箱打开解决方案。