Question

我正在使用[这个]预加载器作为我的个人作品集。

var h = window.innerHeight;
            $('.page-overlay').css('height',h);
            var al = 0;
            function progressSim(){
              document.querySelector('.page-overlay>.text>p').innerHTML = 
al+'%';
              if(al>=100){
                  clearTimeout(sim);
                }
                al++;
              }
              var sim = setInterval(progressSim,50);
              $('.body, .navbar').hide();

              setTimeout(function(){
                $('.page-overlay').hide();
                $('.body,.navbar').show();
              },5500);

HTML就像这样：

<body>
        <div class="page-overlay">
                <div class="text"><p></p></div>
                  <div class="paper-progress-bar"></div>
              </div>
<! header, followed by container divs and loads of paragraphs>
</body>

此外，脚本位于正文的结束标记之前。动画工作正常，它在页面叠加层上从零到100，然后它显示它下面的主体。但这里有两个问题：

我不确定这个脚本是否实际上正在等待正文加载。请注意，我现在正在本地编码，我不知道是否有任何其他方法来测试它。当网站上线时，这个脚本会显示页面加载的百分比吗？或者只是模拟或等待时间？
我已经添加了（＆＃39; .body，.navbar＆＃39;）。hide（）;但它不起作用。为了增加噱头，我将页面覆盖设置为固定位置，并将z-index设置为高。但滚动条处于活动状态，并且页面加载时后面的主体也处于活动状态。如果我将body类显示设置为none，它将隐藏包括页面覆盖在内的所有内容。

任何帮助将不胜感激。提前致谢。这是我关于stackoverflow和第一次建立网站的第一个问题，所以对任何有问题的错误表示歉意。

p.p.s。我将其用作预加载器https://codepen.io/sanjay8bisht/pen/wKPqVd

Answer 1

我将从第二个问题开始。正文和导航栏隐藏不起作用，因为您添加了“。”在身体弦之前。

第一个问题：

如果我们探索脚本：

获得窗口的高度。

var h = window.innerHeight;

使用页面高度

在页面上设置叠加层

$('.page-overlay').css('height',h);

创建一个用于保持0到100计数器的变量：

var al = 0;

创建一个模拟页面加载的函数，稍后我们将使用它

function progressSim(){

在叠加层上的段落元素中显示加载计数器

    document.querySelector('.page-overlay>.text>p').innerHTML = al+'%';

如果值达到100或超过100：

    if(al>=100){

停止循环功能。

       clearTimeout(sim);

    }

增加页面加载计数器。

    al++;

完成功能。

现在真实的部分：

以50毫秒的间隔重复上述功能，因此从0到100的计数将需要：50 * 100：5000毫秒（5秒）。

var sim = setInterval(progressSim,50);

同时隐藏身体和导航栏：

$('.body, .navbar').hide();

然后经过5500ms（5.5秒）后，隐藏叠加层，再次显示正文和导航栏。

setTimeout(function(){
   $('.page-overlay').hide();
   $('.body,.navbar').show();
},5500);

你怎么看？这只是一个动画。不是真正的装载机。

你可以看一下这个：http://github.hubspot.com/pace/docs/welcome/以获得更可靠的东西。

Jquery预加载器动画工作，但它是一个噱头还是实际上计算网站负载？

1 个答案: