使用jQuery加载屏幕 [英] Loading screen using jquery

问题描述

可能重复:
如何显示页面加载图像/div/文本，直到页面完成加载/渲染

Possible Duplicate:
How to show Page Loading image/div/text until the page has finished loading/rendering

我想使用jquery显示整个页面的加载屏幕.我以前从未使用过加载功能，因此感到困惑.我要做的就是隐藏其他元素，直到所有脚本css图像和内容加载完毕.我该怎么办?

I want to display a full page loading screen using jquery. I never used loading before so i am confused. all i want to do is hide other elements untill all scripts css images and content are loaded. How do i do it?

推荐答案

非常简单:

1. 创建一个div来填充屏幕，您可以在其中放置加载的图像或文本
2. 在您的html文件末尾，或使用jquery $(document).ready(function(){...});删除div.
3. 您提到了所有图像" ...可能还需要一些额外的东西.

因此，在您的html中，将宽度或高度的100％固定为绝对值或绝对值..(我建议将溢出变为隐藏状态，这样就没有滚动条了(宽度+填充+边距=> 100％)

SO, in your html, make an fixed or absolute div with 100% width and height.. (i suggest turning the overflow to hidden so you don't have scroll bars (width +padding + margin = >100%)

<div id='loading_wrap' style='position:fixed; height:100%; width:100%; overflow:hidden; top:0; left:0;'>Loading, please wait.</div>

您可以这样将其放在头部:

Either you can put it in the head as this:

<script type='text'javascript'>
$(document).ready(function(){
    $('#loading_wrap').remove();
});
</script>

或将其添加到html页面的末尾(恰好在html标记之前):

Or add this at the end of your html page, (right before the closing html tag):

<script type="text/javascript">$('#loading_wrap').remove();</script>

这可能不会等待图片加载完毕，因为这将是一个循环，在触发.remove();之前先检查图片是否已加载.

This might not wait for the pictures to be loaded, for this you would be a loop that check if the pic are loaded before triggering the .remove();

这篇关于使用jQuery加载屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！