[英]Loading screen in an HTML5 app
我正在从事一个涉及获得大量大型资产(css,js等)的项目(而非游戏)。 在UIWebView(iOS)中打开页面时,在加载所有内容时会出现3-5秒的空白页面。
我想避免这种情况。 我猜我应该添加一个HTML5加载屏幕,但是我不知道该怎么做。 有指针吗?
在将内容加载之前,我会将其隐藏起来,同时使用JS来显示加载动画。
简单的动画签出在HTML5 canvas中简单地加载动画
您可以在HTML5中使用<progress>
元素。 请参阅此页面以获取源代码和实时演示。 http://purpledesign.in/blog/super-cool-loading-bar-html5/
这是进度元素...
<progress id="progressbar" value="20" max="100"></progress>
这将具有从20开始的加载值。当然,仅元素不会满足要求。 您需要在脚本加载时移动它。 为此,我们需要JQuery。 这是一个简单的JQuery脚本,该脚本从0到100开始进度,并在定义的时隙内执行某些操作。
<script>
$(document).ready(function() {
if(!Modernizr.meter){
alert('Sorry your brower does not support HTML5 progress bar');
} else {
var progressbar = $('#progressbar'),
max = progressbar.attr('max'),
time = (1000/max)*10,
value = progressbar.val();
var loading = function() {
value += 1;
addValue = progressbar.val(value);
$('.progress-value').html(value + '%');
if (value == max) {
clearInterval(animate);
//Do Something
}
if (value == 16) {
//Do something
}
if (value == 38) {
//Do something
}
if (value == 55) {
//Do something
}
if (value == 72) {
//Do something
}
if (value == 1) {
//Do something
}
if (value == 86) {
//Do something
}
};
var animate = setInterval(function() {
loading();
}, time);
};
});
</script>
将此添加到您的HTML文件。
<div class="demo-wrapper html5-progress-bar">
<div class="progress-bar-wrapper">
<progress id="progressbar" value="0" max="100"></progress>
<span class="progress-value">0%</span>
</div>
</div>
希望这会给您一个开始。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.