SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Evangelist
    Join Date
    Jun 2010
    Location
    Israel
    Posts
    523
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    About "Loading page" function

    I dont know if this thread supposed to be here or in the javascript forum, but since my pages are in ASP then ill ask it here...
    I got a page that displays pictures, those pictures can be enlarged with the thumbnailviewer javascript function, however, if u click on an image before the script is loaded, it opens the picture on a different page...
    so i want to add sometihng like "Loading images, please wait..." msg when some1 is loading the page, and only after the script is loaded it will view the page, how can it be done?

    Thanks for the assistance,
    Ulthane

  2. #2
    SitePoint Evangelist
    Join Date
    Jun 2010
    Location
    Israel
    Posts
    523
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    nvm, got it ^^
    Code:
    <html><head>
    <script language="JavaScript">
    function clearPreloadPage() 
    { 
      if (document.getElementById){
        document.getElementById('prepage').style.visibility='hidden';
       }
       else{
       if (document.layers){ //NS
        document.prepage.visibility = 'hidden';
       }
       else { //IE
        document.all.prepage.style.visibility = 'hidden';
       }
      }
    } //end function
    </script>
    </head>
    
    <body bgcolor=#FFFFFF onLoad="clearPreloadPage();">
    <div id="prepage" style="position:absolute; font-family:arial; font-size:16; left:0px; 
    top:0px; background-color:white; layer-background-color:white; height:100%; width:100%;"> 
    <table width=100%><tr><td>Put an animated-gif here, change the anamation speed to fit your 
    
    page</td></tr></table>
    </div>
    
    ...Page content goes here...
    
    </body>
    <html>

  3. #3
    SitePoint Evangelist
    Join Date
    Jun 2010
    Location
    Israel
    Posts
    523
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Well, after a few times i tried this function i noticed that the rest of the content of the page is still visible (when scrolling down with the mouse).. How do i change it so the whole page is hidden while loading? or is there a better function to hide the content of the page?

    Thanks in advance,
    Ulthane

  4. #4
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ulthane View Post
    Well, after a few times i tried this function i noticed that the rest of the content of the page is still visible (when scrolling down with the mouse).. How do i change it so the whole page is hidden while loading? or is there a better function to hide the content of the page?

    Thanks in advance,
    Ulthane
    Code:
     
    body {
        display: none
    }
    then

    Code:
     
    window.onload=function() [
       document.body.style.display = 'block';
    }

  5. #5
    SitePoint Evangelist
    Join Date
    Jun 2010
    Location
    Israel
    Posts
    523
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    doesn't seem to work...it just shows a blank page

  6. #6
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,097
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    It would seem Kalon made a typo.

    Does this work?

    Code:
     
    window.onload=function() {
       document.body.style.display = 'block';
    }
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  7. #7
    SitePoint Evangelist
    Join Date
    Jun 2010
    Location
    Israel
    Posts
    523
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Well this works, but i wanted to have a msg aswell saying that the page is loading or something, watching a completely blank page for a few seconds isnt really attractive

  8. #8
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,187
    Mentioned
    17 Post(s)
    Tagged
    4 Thread(s)
    You could do something like the below to achieve that. You just need to have a element wrapping the entire page contents.

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    	<meta http-equiv="content-type" content="text/html; charset=utf-8">
    	<title>Page Loader</title>
    	
    	<script type="text/javascript">
    		setTimeout(function() { 
    			
    			// Get page loader
    			var loader = document.getElementById('page-loader');
    			
    			// remove the page loader
    			loader.parentNode.removeChild(loader);
    			
    			// display the page contents
    			document.getElementById('container').style.display = 'block';
    			
    		},3000); // 3 second delay to mimic onload after 3 seconds
    	</script>
    	
    	
    </head>
    <body>
    
    	<div id="page-loader">
    		<p>loading...</p>
    	</div>
    
    	<div id="container" style="display: none;">
    		<p>Content</p>
    		<p>Content</p>
    		<p>Content</p>
    		<p>Content</p>
    		<p>Content</p>
    		<p>Content</p>
    		<p>Content</p>
    	</div>
    
    </body>
    </html>

  9. #9
    SitePoint Evangelist
    Join Date
    Jun 2010
    Location
    Israel
    Posts
    523
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Perfect, thanks


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •