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

标签 javascript jquery html css

我正在尝试使用常规方法创建一个元素,并在页面加载完成后使用 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 answerjQuery 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/

相关文章:

html - bgcolor支持哪些属性

javascript - 如何使用 javascript 将对象从一个列表移动到同一页面上的另一个列表

javascript - 有没有办法用 Javascript 找到元素的事件处理程序?

javascript - Ajax.BeginForm() 无法异步工作

jquery - Trent Richardson TimePicker 显示日期和时间

html - PayPal 付款收据显示错误的 'Payment sent to' 电子邮件地址

html - 3 列响应式布局在调整大小时有间隙

javascript - 更新数据集时触发 knockout 更改事件(相关下拉列表)

javascript - 如何在 Node.js 上编写快速排序

javascript - 根据用户输入的内容,按钮链接到不同的链接