回到课程

加载可视化图像

重要程度: 4

假设我们有一个速度较慢并希望节省自己移动流量客户。

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

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

因此,起初的所有图像都是 placeholder.svg。当页面滚动到用户可以看到图像位置时 —— 我们就会将 src 更改为 data-srcsrc,然后加载图像。

这是 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();
window.onscroll = showVisible;

对于可视化图像,我们可以使用 img.dataset.src 并将其赋值 img.src(如果还没有这样做)。

P.S. 解决方案还有一个 isVisible 的变体,即位于 1 个页面上方/下方的“预加载”图像(页面高度是 document.documentElement.clientHeight)。

使用沙箱打开解决方案。