Question

我尝试使用常规方法创建元素，并在页面加载完成后使用jQuery隐藏它。

您可以在很多地方看到这种基本方法，但无论如何都是代码：

我想在页面加载时显示图片的DIV，就在<body>标记之后：

<div class="pleasewait"></div>

要在页面加载后从屏幕上删除图标，请在HTML页面的HEAD部分中显示：

$(window).bind("load", function() {
    $(".pleasewait").fadeOut("slow");;
});

CSS用于在页面中心设置图像样式：

.no-js #loader { display: none; }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.pleasewait {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url(img/ajax-loader.gif) center no-repeat #fff;
}

我在我的PHP页面上获取导航栏以加载确定，但在<body>部分上没有显示任何内容，直到页面完全加载（包括等待服务器调用完成并形成页面的其余部分）。

虽然还有其他更高级的方法来实现我的目标，但我真的很想了解我在这里做错了什么。

Answer 1

从评论中我看到你正在使用jQuery 3.1.1。

自jQuery 3.0以来，

.bind()为deprecated

改为使用

$(window).on('load', function(e){
    ....
})

另请确保（来自this answer和jQuery API document）：

当使用依赖于CSS样式属性值的脚本时，在引用脚本之前引用外部样式表或嵌入样式元素非常重要。

Answer 2

HTML

<div id="preloader">
    <div id="status"> 
    </div>
</div>
<div id="wrappers">
    Welcome to page
</div>

CSS

#preloader { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background: #fff; 
    z-index: 999999; 
}

#preloader #status { 
    width: 70px;
    height: 70px; 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    background-image: url(images/loader.gif); 
    background-repeat: no-repeat; 
    background-position: center; 
}

的jQuery

$(document).ready(function(){
    $(window).load(function() {
        $('#status').fadeOut(); 
        $('#preloader').delay(100).fadeOut('fast');  
        $('#wrappers').delay(250).css({'overflow':'visible'});
    });  
});

请等待内容无法加载，直到页面完全加载

2 个答案: