html - 防止图像滑块首先加载其所有图像

Question

我有一个网站，其主页由页面顶部的大图像滑块 (FlexSlider) 和其下方的两行四张图片组成，每张图片都有一个覆盖它的标题。

目前，当页面首次加载时，图像滑块的所有高分辨率图像将在其下方的 8 个较小图像中的任何一个之前加载。这样做的结果是，在加载所有滑块图像时，有一堆丑陋的标题相互堆叠，然后当所有滑块图像都加载后，后续图像最终加载并且页面看起来正常。

有没有办法让滑块图像最后加载？

Answer 1

我不知道单独使用 CSS 可以解决这个问题。如果您可以访问 Javascript，则解决起来会容易得多。

1. 使用轻量级默认横幅图像：加载速度非常快，并在加载时充当滑块图像的占位符。

2. Javascript onload：在页面完全呈现后使用 Javascript 开始替换图像。您有一个占位符，确保布局仍然看起来不错（没有字体混搭或由于缺少加载的图像而损坏的布局），当图像准备好时，它会被整齐地替换。

没有渲染阻塞，没有混乱的布局。一些 Javascript（次要）和通用横幅图像的额外开销（如果高度优化，应该是次要的）。