主页 / 问题 / 806071
Accepted
kot_mapku3
Asked:2020-03-28 23:16:29 +0000 UTC2020-03-28 23:16:29 +0000 UTC

如何为网站制作预加载器？

  • 772

标准方法是加载迷你块和样式，然后隐藏它。
为此，设置了一个计时器。但是，如果 Internet 速度很慢并且预加载器的工作速度比网站加载速度快怎么办？

javascript

3 个回答

  1. Best Answer

    所以也是可以的

    $(window).on('load', function() {
  $('.preloader').delay(2500).fadeOut('slow');
});
    * {
  margin: 0;
  padding: 0;
}

.preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(200, 200, 0, 1);
  z-index: 200;
}

.items {
  width: 140px;
  height: 40px;
  padding: 10px;
  display: flex;
  justify-content: space-around;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.item {
  width: 20px;
  height: 20px;
  border-radius: 50%
}

.item:first-child {
  background: blue;
  animation: col1 .5s linear infinite;
  animation-duration: .3s;
}

.item:nth-child(2) {
  background: yellow;
  animation: col2 .5s linear infinite;
  animation-duration: .4s;
}

.item:nth-child(3) {
  background: black;
  animation: col3 .5s linear infinite;
  animation-duration: .5s;
}

.item:nth-child(4) {
  background: pink;
  animation: col4 .5s linear infinite;
  animation-duration: .6s;
}

.item:nth-child(5) {
  background: green;
  animation: col5 .5s linear infinite;
  animation-duration: .7s;
}

.item:nth-child(6) {
  background: violet;
  animation: col6 .5s linear infinite;
  animation-duration: .8s;
}

@keyframes col1 {
  100% {
    transform: scale(1.2);
  }
}

@keyframes col2 {
  100% {
    transform: scale(1.2);
  }
}

@keyframes col3 {
  100% {
    transform: scale(1.2);
  }
}

@keyframes col4 {
  100% {
    transform: scale(1.2);
  }
}

@keyframes col5 {
  100% {
    transform: scale(1.2);
  }
}

@keyframes col6 {
  100% {
    transform: scale(1.2);
  }
}

.wrapper{
  position: relative;
  padding:0 30px;
}
    <div class="preloader">
  <div class="items">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

<div class="wrapper">
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa inventore, deleniti excepturi porro dicta, doloribus quisquam sequi quod ab reprehenderit assumenda? Voluptatibus accusantium aliquam magnam. Praesentium dolore, possimus blanditiis perferendis
    sit labore incidunt dolores mollitia odio vitae fuga ipsa corporis alias. Amet laboriosam porro et quod. Dolor ullam asperiores voluptatum, alias animi suscipit vel enim ducimus saepe debitis earum natus rerum dicta dolorum hic atque. Voluptate facilis,
    tempore incidunt minus veniam explicabo aut. Beatae assumenda iure omnis nisi quae at, quisquam porro sunt temporibus sint praesentium! Voluptatum debitis optio ipsum labore nostrum, aperiam ex consequatur laudantium facilis. Dolor dolorum quia, ullam
    earum, architecto, voluptate accusamus ratione beatae et at a explicabo! Sed, animi nisi. Eos amet atque, quo sit molestiae illo maxime numquam, ipsam quibusdam natus veritatis nemo obcaecati eius voluptate doloremque deleniti, asperiores deserunt!
    Sequi consectetur rem dolore aliquam optio? Voluptate exercitationem hic eaque consequatur corrupti atque distinctio ratione, veritatis aut id? Error incidunt repellendus eveniet accusamus nihil, culpa dolorum. Quo suscipit doloremque recusandae maiores
    aliquam vel alias deserunt animi saepe, aperiam cum voluptatibus! Aliquid accusantium eos eaque provident, natus dolores obcaecati fuga illum soluta veniam repellat officia, cupiditate recusandae consequatur sint sed alias possimus dolor beatae! Amet
    impedit excepturi veritatis illo? Quisquam ea praesentium aspernatur alias corrupti itaque rem aliquam modi? Animi, ipsum nisi. Officiis quam est molestiae? Molestiae placeat voluptas incidunt. Facilis id neque quasi labore, esse optio fugit rerum
    doloribus voluptas quo provident sunt eligendi magni vitae assumenda animi eos aspernatur! Excepturi odit quasi dicta eos ex, ratione ipsum aspernatur quos, voluptates alias fuga eum quod, nisi magnam nam vitae illum. Magni saepe animi, quaerat ab
    dolores reiciendis nihil! Enim voluptatibus ex exercitationem alias? Distinctio quia porro earum! Eius laboriosam esse minus aliquam. Quasi ab excepturi reiciendis animi modi? Voluptas adipisci minus aperiam veniam magnam. Voluptatibus.</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    • 5

  2. 你可以使用 events window.onload，但是如果你使用 JavaScript 异步加载（我使用requireJS），那么禁用横幅的代码可能会在 event 之后window.onload加载，并且 preloader 不会关闭。

    为了隐藏预加载器，我至少使用了这个，没有 jQuery：

    var preloader = setInterval(function(){
  if (document.readyState === "complete") {
    clearInterval(preloader);
    var elem = document.getElementsByClassName("preloader")[0];
    elem.parentNode.removeChild(elem);
  }
}, 50);

    AMD 模块的真实示例：

    define('app/main', function() {
  "use strict";
  var preloader = setInterval(function(){
    if (document.readyState === "complete") {
      clearInterval(preloader);
      document.getElementsByClassName("js-speed-slider")[0].className += ' animate-in';
      var elem = document.getElementsByClassName("preloader")[0];
      elem.parentNode.removeChild(elem);
    }
  }, 50);
});
    • 4

  3. 默认情况下，我们会在所有内容之上放置一个带有 gif 的可见块。

    接下来，我们为它编写jquery代码

    $(document).ready(function () {
         setTimeout(function () {
              $('.preload').addClass('whitepower');
              $('.whitepower').addClass('gogobonuspower');
              $('body').removeClass('overfloff');
         }, 2200);
       setTimeout(function () {
            $('.preload').hide();
       }, 3300);
});

    whitepower 类在哪里 - 使用 css3 GIF 平滑隐藏块

      .whitepower{background-color: #000 !important;
  transition: 1.5s ease opacity;}
  .whitepower img {
    display: none;}

    overfloff - 禁用滚动（溢出：隐藏），以便在加载过程中不滚动站点标题。

    gogobonuspower - 使透明（不透明度：0）

    并在一定时间后隐藏块（显示：无）

    当然，我们删除了 .htaccess 中的 gif 缓存我以一种丑陋的方式做到了

    <FilesMatch ".(gif)$">
  Header unset Cache-Control
</FilesMatch>
    • 2

相关问题