CODEWITHSUNDEEP
jqueryasp.netvb.net
coder32
coder32

Reputation: 191

ASP.net and Jquery before Page Load

I am new to coding in Jquery and ASP.net. I have read many articles on how to display loading please wait before the page actually loads. I do not want it after the page loads I want it before so I thought using document ready should handle this.

This is my shot at it.

I downloaded Jquery 1.7.1.js and added it to my solution.

The below is my code. 

  <script type="text/javascript">
jQuery.noConflict()(function ($) {
    alert("not loaded");
jQuery(document).ready(function(){ 
  alert("loaded");
 });
}); 
</script>

I also tried the below: how this does not display the alert messages. 

<script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>

<script type="text/jscript">

if(document.readyState === 'complete') {
// good to go!
}


 var interval = setInterval(function() {
if(document.readyState === 'complete') {
    clearInterval(interval);
    alert("my message while loading")
}    
}, 100);

Upvotes: 0

Views: 3099

Answers (1)

Sudip Thapa
Sudip Thapa

Reputation: 120

$(document).ready()

  • Ideal for one time initialization.
  • Optimization black magic; may run slightly earlier than pageLoad().
  • Does not re-attach functionality to elements affected by partial postbacks.

pageLoad()

  • Unsuitable for one time initialization if used with UpdatePanels.
  • Slightly less optimized in some browsers, but consistent.
  • Perfect for re-attaching functionality to elements within UpdatePanels.

The window.load however will wait for the page to be fully loaded, this includes inner frames, images etc.

This might help you

 <div id="dvLoading"></div>
    <script>
        $(window).load(function(){
          $('#dvLoading').fadeOut(2000);
        });
    </script>

CSS

#dvLoading

    {
           background:#000 url(images/loader.gif) no-repeat center center;
           height: 100px;
           width: 100px;
           position: fixed;
           z-index: 1000;
           left: 50%;
           top: 50%;
           margin: -25px 0 0 -25px;
        }

Try This as well,

$(document).ready(function(){    
    alert('page loaded');  // alert to confirm the page is loaded    
    $('.divClassName').hide(); //enter the class or id of the particular html element which you wish to hide. 
});

Upvotes: 1

Related Questions