在页面加载时显示加载图像

时间:2013-09-18 10:19:07

标签: javascript jquery dom domready

我想在页面尚未加载时显示Loading图像。在加载页面之前,它向用户显示blank white page。所以,我想删除白色空格。

该页面的数据库命中次数过多,因此加载速度有点慢。

我已经检查了this帖子,但这不起作用。

我已经通过添加<![CDATA[脚本来检查,正如blogpost中所述。 这不起作用。

最后,我已经登陆提问,但它是重复的。

这是我的剧本。

<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;

}

我的代码出了什么问题?有人可以指出或提供有效的解决方案。

干杯!!!

KARTHIK

1 个答案:

答案 0 :(得分:2)

我得到了这个问题的解决方案。

问题不在于div元素的高度,也不在于Images / CSS问题。

问题在于窗口加载完成后立即执行的另一个script,脚本包括DOM就绪和剩余的javascript函数。

我删除了在window.load之后执行的下一个脚本,并将其放在body标记结束之后。

<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>

假设:我认为在$(window).load(function () {脚本完成后,不应该再运行任何其他脚本。

感谢所有评论的人。

如果我的假设有误,请提及阻止loading图片显示的真正问题。