我正在尝试向我的网站添加一个加载器,该加载器在页面“加载”时应该是可见的。
例如。加载时间约为。 6.8 秒(等待 6.3 秒,下载 0.4 秒)。我希望我的装载机在整个 6.8 秒内都可见,但就像现在一样,它只在最后几秒显示。
这是我的代码: HTML:
<div id="tpa-preloader"></div>
CSS:
#mk-boxed-layout{ display: none; }
#tpa-preloader{
display: block;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:url(/preloader.gif) no-repeat #FFFFFF 50%;
-moz-background-size:148px 128px;
-o-background-size:148px 128px;
-webkit-background-size:148px 128px;
background-size:148px 128px;
z-index: 99998;
width:100%;
height:100%;
}
JavaScript:
function onReady(callback) {
var intervalID = window.setInterval(checkReady, 1000);
function checkReady() {
if (document.getElementsByTagName('body')[0] !== undefined) {
window.clearInterval(intervalID);
callback.call(this);
}
}
}
function show(id, value) {
document.getElementById(id).style.display = value ? 'block' : 'none';
}
onReady(function () {
show('mk-boxed-layout', true);
show('tpa-preloader', false);
});
这是我网站的链接:http://nettbutikk-sandbox.ellco.me/produkt/o35/
如何让 tpa-preloader
在整个 6.8 秒内可见,也就是说从加载过程的一开始就可见?
提前致谢!
最佳答案
像大多数语言一样,JS 也使用序列访问。我想说:
将您的加载程序代码放在顶部 html 页面上。 加载库。然后:
<正文>
<script> // Init you preloader // After this script put all other.... // then use window.onload and put on bottom some // setTimeout ( 4-6 sec ) then timer will trigger func hide preloader... </script>
关于javascript - 在等待数据时触发 JavaScript-loader,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50212768/