时间戳

首页 > 解决方案 > 等待数据时触发 JavaScript-loader

javascript - 等待数据时触发 JavaScript-loader

问题描述

我正在尝试向我的网站添加一个加载器，该加载器在页面“加载”时应该可见。

例如。加载时间约为。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 秒可见，这意味着从加载过程的一开始？

提前致谢！

标签： javascripthtmlcsswordpressloading

解决方案

像大多数语言一样，JS 也使用序列访问。我想说 ：

  1. 将您的加载程序代码放在顶部 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>

推荐阅读