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 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
Share Improve this question edited May 23, 2017 at 10:25 CommunityBot 11 silver badge asked Sep 18, 2013 at 10:19 Karthik ChintalaKarthik Chintala 5,5455 gold badges32 silver badges61 bronze badges 19- is this a blank page or what the page loads after many database hits..? – Anto Commented Sep 18, 2013 at 10:22
- another approach might be to load your page layout and text, then bring in the images with ajax calls. – DragonZero Commented Sep 18, 2013 at 10:23
- make sure that loading div has 100% height of page! – Gena Moroz Commented Sep 18, 2013 at 10:24
-
1
There may be a problem with
loadevent, as it's not always fully supported. You could useready, although it is a little bit different. – Nebril Commented Sep 18, 2013 at 10:28 - 1 @DipeshParmar No BlockUI at all. Does BlockUI loads the images before DOM Ready. – Karthik Chintala Commented Sep 18, 2013 at 10:30
1 Answer
Reset to default 3I 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 pletes, 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 plete.
<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 mented.
If my assumption is wrong, please mention what the real problem that stopped the loading image to show up.