'在整个网站加载之前加载'div

Question

在加载所有文件（图像，脚本，js文件）的同时是否有任何方式显示LOADING DIV？

其实我认为它可以使用jQuery/AJAX做，但我不知道，因为我没有找到任何解决办法呢。

一个很好的例子是谷歌的Adwords（对于那些你们谁有一个帐户）。

我的脚本有大量的图片和js文件的，如果你问我，所以我想展示一些东西给用户，而一切加载其中有些是相当沉重的。

注：我不认为是的setTimeout完美的解决方案的原因，而是没有真正做的工作 - 它只是模仿它。

Answer 1

jQuery有几个方法可以处理这个问题。我认为最简单的方法是创建<div id="loading">并使用高z-index来覆盖您的页面。然后，使用

$(window).load(function() { 
    $('#loading').hide(); 
}); 

在文档完全加载时隐藏它。

注意：这不一定会等到所有的JavaScript方法完成处理。它会在从服务器接收到图像，JS文件等后触发。但是，如果你有一个沉重的JS方法来处理页面（例如，将每个单词包装在一个div中，然后对此做一个复杂的算法），那么你需要在该方法的末尾插入一个回调来隐藏加载对话框。

Answer 2

我通常使用以下方法：将2周的div：一个容器和一个装载DIV。加载div应该有位置：固定在CSS中，并使其占据100％的宽度和高度。

上的负载，我想补充：

$("#container").load(url, myFunction); 

其中“URL”是一个HTML 片段（不是一个完整的页面）应注入容器DIV的路径。 myFunction是一个函数指针，它应该包含如下内容：

$("#loading").fadeOut(500); 

这会淡化加载div 500毫秒。

请确保您调用$（document）.load（）而不是$（document）.ready（），因为ready会在加载图像之前触发。