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

这会对你有所帮助。加载第一个文档然后加载窗口。

a = np.random.random(size=(100000, 100))
q = scipy.linalg.orth(a)

更多参考 - http://javarevisited.blogspot.in/2014/11/difference-between-jquery-document-ready-vs-Javascript-window-onload-event.html?m=1

Answer 2

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

发生这种情况，例如在你的小提琴中，因为页面上几乎没有任何内容可以加载。

您可以使用此js修复您的小提琴，并将js的加载类型设置为“No wrap-in＆lt; body＆gt;”：

$(".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');
  }); 
});

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

加载叠加层直到呈现页面

2 个答案: