我有一个适用于触摸设备,如iPhone和Android的应用程序。该应用程序完全使用HTML、CSS和JavaScript构建。当应用程序加载时,它会显示那些具有背景图像设置的空元素,大约需要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秒才能加载完毕,我该如何在展现视图前预加载它们呢?或者我该如何测试图片的css文件是否被加载,以确保所有图片都被加载?