我有一个适用于 iPhone 和 Android 等触摸设备的应用程序。该应用程序完全使用 HTML、CSS 和 JavaScript 构建。当应用程序加载时，它会显示那些设置了大约 background-image 的空白元素。 0.5 秒。一段时间后，这些元素会被图像填充，这就是图像加载到设备需要时间的原因。
我在名为 images.css (893 KB) 的 css 文件中将所有图像作为 Base64 数据 URI，如下所示。
.icon { background-image: url(data:image/png;base64,bytes.....; }
.img1 { background-image: url(data:image/png;base64,bytes.....; }
.img2 { background-image: url(data:image/png;base64,bytes.....; }
.img3 { background-image: url(data:image/png;base64,bytes.....; }
该应用程序可以运行，但图像大约有 60 秒，我如何在显示 View 之前预加载它们？或者如何测试 images.css 文件是否已加载以确保图像已全部加载？
最佳答案
这是一个相当大的 css 文件。 Base64 在空间方面的效率低得可怕，所以你绝对可以通过使用适当的图像文件来加快速度，如果需要的话，还可以使用 CSS Sprite 。对于这些外观的示例，您不必比 SO 本身看得更远。整个页面上漂亮的图标来自一个图像文件 http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=4它被加载到具有适当高度/宽度偏移的固定大小的 div 中，以仅显示所需的小块。
关于javascript - 网页图像加载时间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7351120/