Question

我一直在尝试使用jQuery库来预加载内容，我遇到的常见问题是，一旦所有内容都被预加载，它会显示一个div然而在一瞬间你仍然可以看到“看起来很糟糕”的内容为javascript尚未适用于它，而不是它应该变成它应该是什么样子。很难解释。基本上我试图在整个页面加载后在页面上显示div（<div class="text"></div>），所以图像，javascript文件等等。我找到了一个非常好的例子，我不会在这里结束了< / p>

http://tympanus.net/codrops/collective/collective-58/

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

Answer 1

对于给你带来麻烦的div，为什么不在html中将其可见性设置为“hidden”，然后在javascript中将所有内容设置为“可见”后将其更改为“可见”

HTML：

<div class="text" style="visibility:hidden"></div>

JS：

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

Answer 2

最初为你的div使用display:none并显示加载gif。

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

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

预加载div一次图像，javascript文件加载？

2 个答案: