我正在尝试使用常规方法创建一个元素,并在页面加载完成后使用 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>
上没有任何内容部分一直显示到页面完全加载(包括等待服务器调用完成并形成页面的其余部分)。
虽然还有其他更好的方法可以实现我的目标,但我真的很想了解我在这里做错了什么。
最佳答案
从评论中我看到您使用的是 jQuery 3.1.1。
.bind()
是 deprecated从 jQuery 3.0 开始
改为使用
$(window).on('load', function(e){
....
})
还要确保(来自 this answer 和 jQuery API document ):
When using scripts that rely on the value of CSS style properties, it's important to reference external stylesheets or embed style elements before referencing the scripts.
关于javascript - 请等待页面完全加载后才会加载内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48700078/