是否可以为HTML5应用(针对移动Safari)预加载一组图像?
在理想情况下,应用程序的启动映像会一直存在,直到加载了某些映像为止。
我们尝试使用CSS background属性,并将每个图像作为单独的背景,但无法预加载图像并保留启动图像。
这是我们用于设置启动图像的HTML,但是直到所有图像都加载完毕后,该HTML才能持续存在:
<!-- iPhone 3 and 4 Non-Retina -->
<link rel='apple-touch-startup-image' media='(device-width: 320px)' href='/images/x/apple-touch-startup-image-320x460.png'>
使用以下代码使用jquery预加载图像。
<style type="text/css">
.start_up{width:100%;height:100%;position:fixed;z-index:999;display:none;}
.start_up img{width:100%;height:100%;display:block;}
</style>
<div class="start_up"> <img src="startup-image.png" /></div>
<script type="text/javascript">
$(document).ready(function(e) {
//showing startup image. By default it will be display:none via css.
$('.start_up').show();
//load img
var imgArray = ['image 1 path','image 2 path', 'image 3 path'];
var total = imgArray.length;
var imgLoaded = 0;
for (var i in imgArray) {
$("<img />").load(function() {
imgLoaded++;
if (imgLoaded == total) {
//when all images loaded we hide start up image.
$('.start_up').hide();
}
}).error(function() {
imgLoaded++;
if (imgLoaded == total) {
//when all images loaded even error in img loading, we hide startup image.
$('.start_up').hide();
}
}).attr("src", imgArray[i]);
}
});
</script>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句