show loading image while the page is loading

Question

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

is this a blank page or what the page loads after many database hits..? — Anto, Sep 18 '13 at 10:22
another approach might be to load your page layout and text, then bring in the images with ajax calls. — DragonZero, Sep 18 '13 at 10:23
There may be a problem with `load` event, as it's not always fully supported. You could use `ready`, although it is a little bit different. — Nebril, Sep 18 '13 at 10:28
@ghaxx onload event of window object is fully supported on all browser, problem comes for script/CSS or images — A. Wolff, Sep 18 '13 at 10:29
@DipeshParmar No BlockUI at all. Does BlockUI loads the images before DOM Ready. — Karthik Chintala, Sep 18 '13 at 10:30
guys, make sure you learned css before you take work. His loader just has no height. http://jsfiddle.net/PS43p/ working example — Gena Moroz, Sep 18 '13 at 10:31
@AntoVinish Actually there are dropdown values and a huge stored proc that fetches the result on to the page. so, for a low speed internet it takes much time. And hence the blank screen is being shown. After the data is loaded, it displays the content as expected — Karthik Chintala, Sep 18 '13 at 10:32
@A. Wolff: You may be right, but there's still a note about `load` on http://api.jquery.com/load-event/. So maybe this is connected with the problem? — Nebril, Sep 18 '13 at 10:37
If the delay is because of database hits then the server will not send any response to browser so you have to show a temporary loading page and use Ajax calls to get finished all the database works and after the response redirect to the original page — Anto, Sep 18 '13 at 10:39
@GenaLondon Thanks Gena for fiddle. I just copied the css in the fiddle to the css files.I've set the height of the `divLoading` to 100%,but still doesn't work. — Karthik Chintala, Sep 18 '13 at 10:41
@ghaxx because you are wrapping inside onload handler, so code is executed once page is loaded and so it's too late to fire onload event. Ready event (jquery) is particular, it is a pseudo event which will fired even the DOM is already ready, using a promise resolved manually. Note that once fired, ready handlers are unbound, you cannot later trigger it again manually. Hope what i said makes sense — A. Wolff, Sep 18 '13 at 10:41
@ghaxx concerning note, this is just due to the fact than onload event doesn't propagate/bubble throught the DOM, making delegation unefficient. That's said, the real problem with onload event is regarding images and CSS external files as i'm aware of. — A. Wolff, Sep 18 '13 at 10:45
@AntoVinish though there are database hits, the page has loading div right after the body, then why does it wont show up ? Also the database calls will be in the Page_Load() in code behind file — Karthik Chintala, Sep 18 '13 at 10:46
@A. Wolff: Makes sense. Just to clarify: your answer is to my question from previous comment, which I edited. It was about `load` and `ready` on jsfiddle. — Nebril, Sep 18 '13 at 10:47
OP, if ajax requests are done during page loading, you should use global ajax event as $.ajaxStop() to remove loading img the first time ajaxStop is fired. Could be a solution i think — A. Wolff, Sep 18 '13 at 10:47
@A.Wolff But there are no ajax call is being made for the first time when the page loads. It just shows a blank page. After the page is loaded ajax call were made and i'm showing the same image as a loading image and it works perfect. But when the page is loaded for the very first time it should show the loading image as Gena London has mentioned in her fiddle — Karthik Chintala, Sep 18 '13 at 10:51
@karthik I'm sorry, i read before an other question regarding ajax and have blend both questions, my apologies... — A. Wolff, Sep 18 '13 at 11:00

score 3 · Accepted Answer · answered Sep 18 '13 at 11:31

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.

show loading image while the page is loading

1 Answers1

Linked