jQuery 页面加载栏直到整个页面加载完毕？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5970289/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Page loading bar until the entire page has loaded?
提问by Louise McComiskey
Possible Duplicate:
Loading bar while script runs
可能的重复：
脚本运行时加载栏
Hi, I have a page that has alot of images and was wondering if there was a way to delay the display of this images until the entire page has loaded, like a loading bar maybe, but using jQuery? Any help would be great thankyou.
嗨，我有一个包含大量图像的页面，我想知道是否有办法将这些图像的显示延迟到整个页面加载完毕，比如加载栏，但是使用 jQuery？任何帮助都会非常感谢。
回答by Gary Green
Sure this is very easy to do with jQuery. Use the window.loadevent to determine when all the images are loaded, then show the content:
当然，使用 jQuery 很容易做到这一点。使用window.load事件来确定所有图像何时加载，然后显示内容：
HTML
HTML
<html>
<body>
<div id="loading"></div>
<div id="container">
<img src="http://www.playirishlottery.co.uk/wp-content/uploads/image-2.jpg"/>
</div>
</body>
</html>
jQuery
jQuery
$(window).load(function() {
//show();
});
function show() {
$('#loading').hide();
$('#container').fadeIn();
};
setTimeout(show, 3000);
In the above example I've used setTimeoutto just demonstrate. In reality your remove this and uncomment the show() in in the .loadfunction
在上面的例子中，我setTimeout只是用来演示的。实际上，您删除它并取消注释.load函数中的 show()
Fiddle:http://jsfiddle.net/xM6v9/
小提琴：http : //jsfiddle.net/xM6v9/
回答by Erick Petrucelli
If you only want to display something until your page is fully load, jQuery isn't needed: http://jsfiddle.net/ErickPetru/g7D8e/.
如果您只想在页面完全加载之前显示某些内容，则不需要 jQuery：http: //jsfiddle.net/ErickPetru/g7D8e/。
Explanation: your page content will be inside a divwith display: noneand another divshows the loading message/gif.
说明：您的页面内容将在一个divwith 内display: none，另一个div显示正在加载的消息/gif。
You need to put that required JS near the </body>inside a <script>. This way that JS will run only all is loaded before it.
您需要将所需的 JS</body>放在<script>. 这样 JS 将只运行 all 在它之前加载。
回答by Michael
Well i just encountered a simular problem / issue. My page was loading real slow due to images in the homepage image carousel. The solution for me was async image loading.
好吧，我刚刚遇到了一个类似的问题/问题。由于主页图像轮播中的图像，我的页面加载速度非常慢。我的解决方案是异步图像加载。
You put your image tags in your page dont fill the src. but put your src inside a class tag or something. Use jquery to get all the src's and preload those images and edit the images, add the source when there loading. This will prevent the page from being blocked by the image downloads and load your page loads faster.
你把你的图像标签放在你的页面中，不要填充 src。但是把你的 src 放在一个类标签或其他东西里。使用 jquery 获取所有 src 并预加载这些图像并编辑图像，在加载时添加源。这将防止页面被图像下载阻止并加载您的页面加载速度更快。
Take a look at http://staticvoid.info/imageLoader/
看看http://staticvoid.info/imageLoader/
You could also try lazy loading images. (only load image inside the viewport, those outside will be loaded when scrolled to)
您也可以尝试延迟加载图像。（仅在视口内加载图像，滚动到外部时将加载图像）
回答by brad
Just use window.onload
只需使用window.onload
It's fired once everything on the page is loaded. No JQuery required.
一旦页面上的所有内容加载完毕，它就会被触发。不需要 JQuery。
