show loading image while the page is loading

StackOverflow https://stackoverflow.com/questions/18869623

سؤال

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.

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.

Here is my script finally.

<script src="../../Scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
    // <![CDATA[
        $(window).load(function () {
            $("#divLoading").fadeOut("slow");
        });
    // ]]>
</script>

and in the 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 CSS of loading is:

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

Cheers !!!

Karthik

هل كانت مفيدة؟

المحلول

I got the solution to this question.

The problem is not with the height of the div element nor the Images/CSS problem.

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

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>

Assumption: I think after the $(window).load(function () { script is done, there should not be any other scripts further running.

Thanks to all the guys who commented.

If my assumption is wrong, please mention what the real problem that stopped the loading image to show up.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top