在页面加载时显示加载图像 [英] show loading image while the page is loading
问题描述
当页面尚未加载时，我想显示一个载入图像。在加载页面之前，它向用户显示一个空白白页。所以，我想删除白色空白。
I want to show a Loading image when the page is not loaded yet. Before loading the page it shows a blank white page to the user. So, i want to remove the white blank space.
该页面使数据库命中数据太多，所以加载速度稍慢。
The page makes too many database hits, so it loads a bit slowly.
我已经检查过这个帖子，但是没有
I've checked this post, but that doesn't work.
我已经通过添加<！[CDATA [ blogpost 中说明。
这不起作用。
I've checked by adding <![CDATA[ infront of the script, as it stated in the blogpost.
That doesn't work.
最后我登陆了一个问题，虽然重复。
Finally i've landed in Asking a Question, though it is a duplicate.
这是我的脚本。
<script src="../../Scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
// <![CDATA[
$(window).load(function () {
$("#divLoading").fadeOut("slow");
});
// ]]>
</script>
在正文中
<body style="background-color: white;">
<div id='divLoading'>
<div class="loading" align="center" id="divImageLoader">
<img src="../../ItemSelectorImages/ajax-loader_bluish.gif" alt="Loading..."/> Loading
</div>
</div>
</body>
加载的CSS是：
.loading
{
font-family: Arial;
font-size: 10pt;
padding:20px;
position: fixed;
background-color: #ffffff;
z-index: 99999;
border-radius:5px;
}
我的代码有什么问题？有人可以指出或提供工作解决方案。
What was wrong with my code ? Can someone point out or give working solution.
欢呼!!!
Karthik
推荐答案
我得到了这个问题的解决方案。
I got the solution to this question.
问题不在于div元素和图像/ CSS问题。
The problem is not with the height of the div element nor the Images/CSS problem.
问题是另一个脚本窗口加载完成后，该脚本包含DOM就绪和剩余的JavaScript函数。
The problem is with another script that is executed right after the window load completes, the script includes the DOM ready and remaining javascript function(s).
我已经删除了在window.load之后执行的下一个脚本身体标签结束后。
I've removed the next script that is executed after the window.load and placed after end of the body tag.
<body style="background-color: white;">
<div id='divLoading'>
<div class="loading" align="center" id="divImageLoader">
<img src="../../ItemSelectorImages/ajax-loader_bluish.gif" alt="Loading..."/> Loading
</div>
</div>
</body>
//The following second script is placed here so as to load after the body load is complete.
<script>
includes DOM Ready, and some javascript functions to be called.
</script>
假设：我认为 $窗口）.load（function（）{脚本完成，不应再有其他脚本进一步运行。
Assumption: I think after the $(window).load(function () { script is done, there should not be any other scripts further running.
感谢所有的人谁评论。
如果我的假设是错误的，请提及阻止加载图像显示的真正问题
If my assumption is wrong, please mention what the real problem that stopped the loading image to show up.
这篇关于在页面加载时显示加载图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
