Question

我有这两个div！

<div id="loader">
</div>

和

<div id="wrapper">
</div>

“包装器div不在加载器div内部以进行任何澄清”

我的剧本

$(window).bind("load",function() {
           $('#loader').css('display',none);
           $('#wrapper').css('visibility',visible);
        });

我打算用脚本做的是在页面完全加载后隐藏加载器div并显示包含页面所有内容的包装器div。我最初在包装器样式中设置了display:none。

正如我所料，显示加载器div但是在加载完成后（我至少可以从鼠标的加载图标和浏览器选项卡的favicon区域告诉）但是包装器div是没有显示。

任何帮助都会很好。

Answer 1

您应该使用$(document).ready()完全加载页面。

以下代码可以帮助您......

$(document).ready(function(){
    $('#loader').css('display','none');
    $('#wrapper').css('display','block');
});

Answer 2

使用此功能;

$(document).ready(function() {
           $('#loader').hide();
           $('#wrapper').show();
});

或

$(document).ready(function() {
           $('#loader').css('display','none');
           $('#wrapper').css('visibility','visible');
});

工作小提琴：http://jsfiddle.net/33zch/

Answer 3

在某些浏览器中，例如Firefox，事件$(window).load()仅在成功加载所有元素（例如图片）后出现，但同时在Chrome $(window).load()和$(document).ready()中被激活。使用$(window).load()在firefox中可能存在潜在问题（也可能在其他浏览器中）：如果页面上至少有一个图像加载了错误，则事件不会发生。并使用正确的语法：

$('#loader').css('display','none');
$('#wrapper').css('display','block');

或

$('#loader').hide();
$('#wrapper').show();

Answer 4

应该是这样的： -

$('#loader').css('display','none');
$('#wrapper').css('visibility','visible');

Answer 5

您可以使用这种简单的方式。

window.onload = $('#loader').hide();
window.onload = $('#wrapper').show();

Answer 6

您告诉您最初将wrapper元素设置为display:none;然后通过添加visibility:visible将其显示为何？相反，您应该添加display:block以使其正常工作。

<强> Working Demo

使用Jquery在加载时显示div

6 个答案: