javascript - 加载叠加层直到页面呈现

Question

我正在努力使页面上有一个覆盖层，直到页面完全呈现。我可以通过使用超时来做到这一点，但这可能不是正确的方法。有没有更好的方法来实现这一点？

我遇到的问题是 $(window).load 没有触发。

JS:

$(document).ready(function() {
  $(".overlay").fadeIn();
  $(window).on('load', function() {
    $(".overlay").fadeOut();
  });

});

CSS:

.overlay{
    display: none;
    position: fixed;
    padding: 0;
    margin: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .3);
    opacity: .8;
    pointer-events: none;
}

JSFiddle Demo

Answer 1

jQuery 的 document.ready 事件是异步触发的，因此在某些情况下可能会在 window.load 事件之后触发。

• > https://github.com/jquery/jquery/issues/3197
• > https://github.com/jquery/jquery/issues/1823
• > https://github.com/jquery/jquery/issues/3447

这发生在例如在你的 fiddle 中，因为页面上几乎没有任何东西可以加载。

你的 fiddle 可以使用这个 js 修复，并将 js 的加载类型设置为“No wrap - in ”:

$(".overlay").fadeIn(function(){
  console.log('fadedin');
});

$(window).on('load', function(){
    $(".overlay").fadeOut(function(){
    console.log('fadedout');
  }); 
});

也试试:

$(document).ready(function(){
    $(".overlay").fadeIn(function(){
    console.log('fadein');
  });
});

$(window).on('load', function(){
    $(".overlay").fadeOut(function(){
    console.log('fadedout');
  }); 
});

查看 document.ready 事件在 window.load 事件之后触发。