预加载div一旦加载了图像、javascript文件？

我一直在尝试使用jQuery库来预加载内容，我遇到的一个常见问题是，一旦所有内容都预加载，它就会显示一个div，但是在短短几秒钟内，您仍然可以看到“外观不好”的内容，因为javascript还没有应用到它，并且它会改变它的外观。这很难解释。基本上，我试图在加载整个页面后在页面上显示div（

），所以图像、javascript文件等。。我在这里找到了我不想看到的很好的例子

---

您可以看到，网格/内容仅在所有内容加载完毕后才显示，在用户获得加载图像作为等待指示之前，这正是我试图实现的目标。我试着查看源代码，但似乎“预加载”脚本在其他脚本中的某个地方，并且有很多不必要的代码（对我来说）。那么，您能为这个问题建议一个轻量级jQuery解决方案吗？

对于给您带来麻烦的div，为什么不在html中将其可见性设置为“隐藏”，然后在javascript中，在一切就绪后，将其更改为“可见”

html:

---

最初对您的div使用

display:none

，并显示正在加载的gif

$(window).load(function() { 
   $('#yourGifID').hide();
   $('#yourDivID').show(); // will be called when everything is loaded
});

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

---

我想这正是我之前使用的一个解决方案所提供的，但是它似乎在加载所有标记后立即生效，所以它忽略了要加载的所有javascript文件，您使用什么方法来工作？$（“.text”）.css（“可见性”、“可见”）；是您想要的javascript行。在加载javascript（.js）文件之前，请确保您正在加载任何样式（.css）文件。只需尝试一下，甚至将其放在所有负责ui更改的javascript代码之后，就可以看到“糟糕”的代码。我这样做的方式是，我在head中有所有css文件，而不是jQuery和所有javascript文件，就在关闭body标记之前，我是否需要重新定位一些东西？听起来你的javascript中有一个代码在页面加载和显示后被执行，在执行该代码之前，它看起来“不好”，或者更常见的是，代码执行了，css还没有加载，所以在css加载之前，它看起来“丑陋”。你能把这个例子发到某个地方吗？也许是jsfiddle.net？@msanford cool谢谢，事实上我以前就知道，我不知道为什么要在那里写这个，一定是因为所有的工作都让我发疯了；DCool它不适用于显示：无；（某些标记需要是可见的，以便其他东西工作）但在可见性下工作：）在加载内容时是否有可能插入加载图像？当然，您可以显示加载图像，您只需要在加载所有内容时隐藏它，这是因为display:none在display:block之前不会应用css或任何样式；如果希望元素不占用页面上任何不可见的空间，则只希望使用display:none。@MohammadAdil在firefox中似乎不起作用，只是直接显示内容。。我使用的是firefox版本19.0.2的OSX10.8，这是错误的答案。“显示：无”将不会预加载。。。它必须是“可见性：隐藏”，或者您可以使用负绝对定位来隐藏它。

$(".text").css("visibility", "visible");

$(window).load(function() { 
   $('#yourGifID').hide();
   $('#yourDivID').show(); // will be called when everything is loaded
});