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() function in jQuery来完成：

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

Working example here - 单击按钮启动AJAX请求 - 响应延迟5秒，这样您就可以看到＆＃34; loading＆＃34;格

更新

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

HTML：

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

这意味着默认情况下显示，以下jQuery将在页面完全加载后隐藏

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

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

Answer 2

您需要在顶部包含document.ready函数，以便在页面完全加载后可以执行jQuery。

加载页面后显示页面

2 个答案:

更新