Question

我的网站上有一个预加载器，该预加载器的屏幕关闭，然后在加载页面时，该屏幕又回到上一页。

这在我的某些网站页面上有效，但是在加载速度非常快的页面上，屏幕出现了问题，但似乎没有恢复...

有人知道这可能是什么以及如何解决吗？

任何帮助将不胜感激。我的代码在下面。

jQuery(document).ready(function() {

$('.prepage').addClass("animation");
  $('.prepage').one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",
              function(event) {
    $(window).on('load', function() {
        $('.prepage').removeClass("animation");
        $('.prepage').addClass("done");
      });
  });
});

.prepage {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: pink;
    top: -100%;
    left: 0;
    z-index: 999999999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 1s ease-out;
}

.animation {
    top: 0;
}

.done {
    top: -100% !important;
    transition: 1s ease-out;
}

.loader-inside {
    display: inline-block;
    color: white;
    font-weight: bold;
    letter-spacing: 2px;
    font-size: 30px;
    position: relative;
}

.existing {
    opacity: 0.4;
}

.headtype {
    position: absolute;
    top: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="prepage"><div class="loader-inside"><p class="existing">LOADING...</p></div></div>

Answer 1

您可以使用queue()对类删除操作进行排队，这将在加载类时增加延迟，例如，这里的示例将等待1秒钟再返回

jQuery(document).ready(function() {

$('.prepage').addClass("animation");
  $('.prepage').one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",
                function() {
        $(this).delay(1000).queue(function() {  // Wait for 1 second.
          $(this).removeClass("animation").dequeue();
        	$(this).addClass("done");
        });
    });
});

.prepage {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: pink;
    top: -100%;
    left: 0;
    z-index: 999999999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 1s ease-out;
}

.animation {
    top: 0;
}

.done {
    top: -100% !important;
    transition: 1s ease-out;
}

.loader-inside {
    display: inline-block;
    color: white;
    font-weight: bold;
    letter-spacing: 2px;
    font-size: 30px;
    position: relative;
}

.existing {
    opacity: 0.4;
}

.headtype {
    position: absolute;
    top: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="prepage"><div class="loader-inside"><p class="existing">LOADING...</p></div></div>

Answer 2

感谢这些家伙。我尝试了延迟，但是它没有起作用，因为它没有一直覆盖页面下方的内容。

我设法最终解决了这个问题...

它在此处的示例中不起作用，但在现场站点上却可以！

感谢所有帮助和建议：）

$(window).bind('beforeunload', function(){
    $('.prepage').css('top', '0');
});

$(window).bind('load', function(){
    $('.prepage').css('top', '-100vh');
});

.prepage {
    position: absolute;
    width: 100vw;
    height: 100vh;
    background-color: $pink;
    top: 0;
    left: 0;
    z-index: 999999999;
    transition: 1s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="prepage"><div class="loader-inside"><p class="existing">HOLD TIGHT...</p></span></div></div>

Answer 3

使用SetTimeout

在此示例中，代码将等待1秒（1000毫秒）

jQuery(document).ready(function() {

$('.prepage').addClass("animation");
  $('.prepage').one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",
              function(event) {
    $(window).on('load', function() {
        $('.prepage').removeClass("animation");
        setTimeout(function() {
           $('.prepage').addClass("done");
        }, 1000)
      });
  });
});

CSS动画完成后删除类-jQuery

3 个答案: