Question

我想在jquery中创建一个效果，等待我的页面的每个元素在显示任何内容之前完成加载。同样的效果是here。

正如您所看到的，当您加载或刷新页面时，会出现背景颜色，当所有内容都加载完毕后，jquery会将其淡入。我的网站是：http://www.vitaminjdesign.com

关于如何做到这一点的任何想法？

Answer 1

执行此操作的最佳方法（顺便提一下，与Zaum网站使用的方法相同）是创建一个覆盖整个可见画布的div，并在页面完全加载后淡出OUT。这是代码：

#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>

与身体不透明度混淆通常被认为是不好的做法，在某些浏览器上可能不完全支持。

Answer 2

将其放入CSS文件中（或直接放在body标记中）：

body {
    display: none;
}

JS必须（在head或body中）：

<script type="text/javascript">
    $(window).load(function() {
        $('body').fadeIn()
    })
</script>

当加载文档的整个内容时，将执行该函数。

加载页面内容时，Jquery淡入淡出

2 个答案: