Question

我有一个背景和主要容器的网站。我想隐藏容器，直到整个页面加载完毕。所以我添加了

#cover{opacity:0}

在页面的开头和

$(window).load(function() {
  $('#cover').css('opacity','1');
});

最后，就在</body>标记之前。当第一次加载页面时，它可以正常工作。

问题：如果我再次加载同一页面，它会显示分散在整个页面中的所有图像和文本。一旦完全装载，它工作正常。当然这种行为是由缓存的图像引起的。但是所有的图像都在主opacity:0的容器里面，这让我很困惑。

更新1：

我正在使用turn.js将整个容器转换成一本书，我希望在书准备就绪后书籍可见，即加载图像和javascript初始化都已完成。

更新2：

这是我正在检查＆＃34;图像加载＆＃34;和＆＃34; javascript已初始化＆＃34;。它按照我的意愿工作。这是处理这种情况的好方法吗？

$(window).load(function(){
  $(window).ready(function() {
     $('#cover').css('opacity','1');
  });
});

$(window).ready(function(){
  $(window).load(function() {
     $('#cover').css('opacity','1');
  });
});

Answer 1

问题可能与您的$('window').onload();

有关

花一些时间阅读这篇SO帖子。

what-is-the-difference-between-window-load-and-document-ready

  所有资产加载完成后都会调用
加载，包括图像。   当DOM准备好进行交互时，就会触发就绪。

来自MDC，window.onload：

加载事件在文档加载过程结束时触发。在   至此，文档中的所有对象都在DOM中，而且都是   图像和子帧已完成加载。

来自jQuery API   文档，.ready（处理程序）：

当JavaScript提供用于执行代码的load事件时   页面呈现，此事件在所有资产之前都不会被触发   如图像已被完全接收。在大多数情况下，   只要DOM层次结构完全可以运行脚本   建造。传递给.ready（）的处理程序是保证的   在DOM准备好之后执行，所以这通常是最好的地方   附加所有其他事件处理程序并运行其他jQuery代码。使用时   依赖于CSS样式属性值的脚本，这很重要   以前引用外部样式表或嵌入样式元素   引用脚本。

如果此更改有效，请告诉我。

Answer 2

您不会在CSS（#container）和JS（#cover）中调用相同的块。

隐藏容器，直到完全加载不使用缓存的图像

2 个答案: