请等待页面完全加载后才会加载内容-Java 学习之路

我试图使用常规方法创建一个元素，并在页面加载完成后使用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> 部分上没有显示任何内容（包括等待服务器调用完成并形成页面的其余部分） .

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

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'});
    });  
});

回复于 2024-04-30T02:30:16+08:00

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

自jQuery 3.0起 .bind() 是deprecated

而是使用
```
$(window).on('load', function(e){
    ....
})
```
还要确保（来自this answer和jQuery API document）：

当使用依赖于CSS样式属性值的脚本时，在引用脚本之前引用外部样式表或嵌入样式元素很重要 .
回复于 2024-04-30T02:30:16+08:00

请等待页面完全加载后才会加载内容

2 回答

相关问题