主页 / 问题 / 931968
Accepted
Aleksandr
Asked:2020-01-14 19:55:27 +0000 UTC2020-01-14 19:55:27 +0000 UTC

如何按时间为预加载器设定条件？

  • 772

告诉我如何正确设置预加载器的条件：如果页面在10秒内没有完全加载，那么不显示预加载器？

setTimeout(function () {
    fadePreLoader(preLoader);
}, 10000);


window.onload = function () {
    fadePreLoader(preLoader);
};

如何结合这两个代码，使函数不会被执行fadePreLoader(preLoader);两次？

var preLoader = document.getElementById("before-load");

function fadePreLoader(el) {
    el.style.opacity = 1;
    var interPreLoader = setInterval(function () {
        el.style.opacity = el.style.opacity - 0.05;
        if (el.style.opacity <= 0.05) {
            clearInterval(interPreLoader);
            preLoader.style.display = "none";
        }
    }, 16);
}


setTimeout(function () {
    fadePreLoader(preLoader);
}, 10000);


window.onload = function () {
    fadePreLoader(preLoader);
};
#before-load {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #ec1c24;
  z-index: 1501;
  border: 5px solid #ec1c24;
  color:#fff;
}

.before-load__logo,
.before-load__preloader {
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  bottom: 0;
}

.before-load__logo {
  width: 200px;
  top: 75px;
}

.before-load__preloader {
  width: 64px;
  height: 64px;
  top: 0;
}
<div id="before-load">
  Внимание, работает прелоадер.
</div>

Тело сайта

javascript

2 个回答

  1. 这是可能的，通过关闭。你可以把wasHidden它放在全局范围内，但它会变成一个更大的拐杖。

    var preLoader = document.getElementById("before-load");

var fadePreLoader = (function() {
  var wasHidden = false;
  return function(el) {
    if (el.style.opacity != 1 && wasHidden === false) {
      wasHidden = true;
      el.style.opacity = 1;
      var interPreLoader = setInterval(function() {
        el.style.opacity = el.style.opacity - 0.05;
        if (el.style.opacity <= 0.05) {
          clearInterval(interPreLoader);
          preLoader.style.display = "none";
        }
      }, 16);
    }
  }
})();


setTimeout(function() {
  fadePreLoader(preLoader);
}, 3000);


window.onload = function() {
  fadePreLoader(preLoader);
};
    #before-load {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #ec1c24;
  z-index: 1501;
  border: 5px solid #ec1c24;
  color: #fff;
}

.before-load__logo,
.before-load__preloader {
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  bottom: 0;
}

.before-load__logo {
  width: 200px;
  top: 75px;
}

.before-load__preloader {
  width: 64px;
  height: 64px;
  top: 0;
}
    <div id="before-load">
  Внимание, работает прелоадер.
</div>

Тело сайта

    • 2
  2. Best Answer

    为了不执行两次，去掉 setTimeout 和 onload

    var timerId = setTimeout( transfer, 10000 );
window.addEventListener( 'load', transfer );

function transfer () {
    clearTimeout( timerId );
    window.removeEventListener( 'load', transfer );
    fadePreLoader( preLoader );
}

    但是如何在没有单个脚本的情况下确定加载文档的开始，很可能是行不通的。

    你可以“作弊”

    无论脚本如何制作动画然后删除它，
    然后脚本加载时间无关紧要

    @keyframes __load__ {
    0% {
        display: none;
        opacity: 0;
    }
    100% {
        display: none;
        opacity: 0;
    }
}
#before-load {
    background-color: red;
    animation-name: __load__;
    animation-duration: 1s;
    animation-delay: 2s; /* 10 */
    animation-iteration-count: infinite;
}
    <!DOCTYPE html>
<html>
    <head>
        <title>before-load</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div id="before-load">
            Внимание, работает прелоадер (2s).
        </div>
    </body>
</html>

    • 2

相关问题