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

Question

我有一个网页，其主页由页面顶部的大图像滑块（FlexSlider）和其下面的两行四个图像组成，每个页面这些图像有一个覆盖它的标题。

当前，当页面首次加载时，图像滑块的所有高分辨率图像将在其下面8个较小的图像之前加载。这样做的结果是，在加载所有滑块图像时，会有一堆丑陋的字幕叠加在彼此的顶部，然后当所有滑块图像加载后，后续图像最终加载并且页面看起来正常。

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

Answer 1

我不知道任何方式CSS可以解决这个问题。如果你有权访问Javascript，那么解决起来就容易多了。

1. 使用轻量级默认的横幅图片： 东西加载速度非常快，并作为滑块的图像占位符，而他们加载。

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

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