加载页面内容时，Jquery淡入淡出 [英] Jquery Fade when page content is loaded
问题描述
我想在jquery中创建一个效果，等待我的页面的每个元素在显示任何内容之前完成加载。 此处也会产生同样的效果。
I want to create an effect in jquery that waits until every element of my page is done loading before anything is displayed. The same effect is done here.
正如您所看到的，当您加载或刷新页面时，会出现背景颜色，当所有内容都加载完毕后，jquery会将其淡入。我的网站是： http://www.vitaminjdesign.com
As you can see, when you load or refresh the page, the background color appears and when everything is finished loading, jquery fades it in. My website is: http://www.vitaminjdesign.com
有关如何执行此操作的任何想法？
Any ideas on how to do this?
推荐答案
执行此操作的最佳方法（顺便提一下，Zaum网站使用的方法相同）是创建一个覆盖整个可见画布和淡入淡出的div一旦页面完全加载OUT。这是代码：
The best way to do this (which is, incidentally, the same method the Zaum website uses) is to create a div that covers the entire visible canvas and fade that OUT once the page fully loads. Here's the code:
#mask {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background-color:red;
z-index:99;
}
以及HTML：
<HTML>
<HEAD>
<TITLE>Mask Example</TITLE>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<SCRIPT type="text/javascript">
$(window).load(function () {
$('#mask').fadeOut('slow');
});
</SCRIPT>
</HEAD>
<BODY>
<P>Some text goes here</P>
<IMG src="http://spaceflight.nasa.gov/gallery/images/shuttle/sts-119/hires/s119e008352.jpg" />
<P>And moar text!!</P>
<DIV id="mask"></DIV>
</BODY>
</HTML>
与身体不透明度混淆通常被视为不良做法，某些浏览器可能无法完全支持。
Messing with body opacity is generally considered bad practice and may not be fully supported on some browsers.
这篇关于加载页面内容时，Jquery淡入淡出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
