jquery - 加载页面后显示页面

Question

我尝试在加载页面后显示我的页面。

为了做到这一点，

 <div id ="loadingDiv">
        <img src="urltogif">
    </div>

我创建了上面的 div 并使用了下面的 js。

 $('#loadingDiv')
    .hide()  // hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    });

但 gif 图像始终显示在页面上。这是什么原因？

Answer 1

您需要确保在页面完成加载并且 DOM 准备好之后执行 jQuery 代码，这可以使用ready()jQuery 中的函数来完成：

$(document).ready(function() {
    $('#loadingDiv').hide() // hide it initially
    .ajaxStart(function() {
        $(this).show();
    }).ajaxStop(function() {
        $(this).hide();
    });
})​

此处的工作示例- 单击按钮以启动 AJAX 请求 - 响应有 5 秒延迟，因此您可以看到“加载”div

更新

根据您在下面的评论-我认为您希望div在页面加载时显示并隐藏页面：

HTML：

<div id ="loadingDiv">
    <img src="urltogif">
</div>

这意味着它默认显示，一旦页面完全加载，以下 jQuery 将隐藏

$(document).ready(function() {
    $('#loadingDiv').hide();
});

我不确定为什么在这种情况下你有 AJAX 方法!!!????!??? 或者我完全想念你的问题！

Answer 2

You need to include document.ready function at the top , so that the jQuery could be executed once the page is loaded completely.