在HTML5应用程序中加载屏幕
在HTML5应用程序中加载屏幕
提问于 2013-05-12 07:19:36
我正在做一个项目(不是游戏)，它涉及到大量的资产(css，js等)。在UIWebView (iOS)中打开页面时，在加载所有内容时，会有一个空白页面持续3-5秒。
我想避免这种情况。我猜我应该添加一个HTML5加载屏幕，但我不知道怎么做。有什么建议吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-05-12 07:41:32
我会将内容隐藏起来，直到它被加载，同时使用JS显示一个正在加载的动画。
对于一个简单的动画签出Simple loading animation in HTML5 canvas
Stack Overflow用户
发布于 2014-01-09 04:29:29
您可以在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>希望这能给你一个开始。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16502634
复制相关文章
相似问题
腾讯云开发者
