加载整个网站之前的“加载" div [英] 'Loading' div before the entire website is loaded

问题描述

在加载所有文件(图像，脚本，js文件)时，是否有任何方法可以显示LOADING DIV?

Is there any way to show a LOADING DIV while all the files (images,scripts,js files) are loaded?

实际上，我认为可以使用jQuery/AJAX来完成，但是我不确定，因为我还没有找到任何解决方案.

Actually i think it can be done with jQuery/AJAX but I'm not sure cause i didn't found any solution yet.

一个很好的例子是Google Adwords(对于在那有帐户的人来说).

A good example would be Google Adwords (for those of you who have an account there).

我的脚本中有很多图像和js文件，如果您问我，其中的一些文件很重，所以我想在所有内容加载时向用户展示一些东西.

My script has a lot of images and js files and some of them are pretty heavy if you ask me so i would like to show something to the user while everything loads.

注意:我不认为SetTimeout是一个完美的解决方案，因为它并不是真正的工作，它只是模拟它.

NOTE: I don't think that SetTimeout is the perfect solution cause it's not really doing the job - it only simulate it.

推荐答案

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

jQuery has several methods that can handle this. I think the easiest way would be to create a <div id="loading"> and use a high z-index to cover your page. Then, use

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

在文档完全加载后将其隐藏.

to hide it when the document is completely loaded.

注意:这不一定要等到所有javascript方法都已完成处理.从服务器接收到图像，JS文件等后，它将触发.但是，如果您有一个处理页面的笨拙的JS方法(例如，将每个单词包装在div中，然后对此执行复杂的算法)，则需要在该方法的末尾插入一个回调，以隐藏加载对话框.

Note: This will not necessarily wait until all javascript methods have finished processing. It will trigger after images, JS files, etc are received from the server. However, if you have a heavy JS method that processes the page (e.g. wraps every word in a div and then does a complex algorithm on this), then you need to insert a callback at the end of that method that hides the loading dialog.

这篇关于加载整个网站之前的“加载" div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！