ugrás a tartalomhoz

Oldal betoltesenek kesleltetese loading keppel

szmegma · 2010. Már. 13. (Szo), 12.16
SCRIPT MEGTEKINTESE MUKODES KOZBEN

Volna egy scriptem ami arra lenne hivatott, hogy oldal betolteskor eloszor 5 masodpercig mutasson egy loading kepet, majd eltunve pedig a tartalmat az oldalnak.

Sajnos nem igazan mukodik mert a tartalmat is mutatja, mikozben a loadingot is. A loading resz rendben van mert 5 masodperc utan eltunik.

Nem igazan tudtam rajonni, hogy hogyan lehetne rejteni a tartalmat amig loadingol.
  1. <html>  
  2. <head>  
  3. <title></title>  
  4. </head>  
  5.   
  6. <body onLoad="init()">   
  7. <div id="loading" style="position:absolute; width:99%; text-align:center; top:300px;"><img src="loading.gif" border="0"></div>   
  8. <script>   
  9. var ld=(document.all);  
  10.    
  11. var ns4=document.layers;  
  12. var ns6=document.getElementById&&!document.all;  
  13. var ie4=document.all;  
  14.    
  15. if (ns4)  
  16.     ld=document.loading;  
  17. else if (ns6)  
  18.     ld=document.getElementById("loading").style;  
  19. else if (ie4)  
  20.     ld=document.all.loading.style;  
  21. setTimeout(  
  22. function init() {  
  23. if(ns4){ld.visibility="hidden";}  
  24. else if (ns6||ie4) ld.display="none"; }  
  25.   
  26. , 5000 );   
  27.   
  28. </script>  
  29. <center><br><br><br><br><br><br>tartalom<br>tartalom<br>tartalom<br></center>  
  30. </body>  
  31. </html>  
Koszonom.

Esetleg, ha van olyan megoldasa vkinek ami nem hasznal body onload-ot, azt szivesen fogadnam.
‹ jQuery Sortable portlets Firefox vs. ie. ›
 ■
1

CSS

Poetro · 2010. Már. 13. (Szo), 14.52
Itt van egy működő példa:
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
  2. <html lang="hu">  
  3. <head>  
  4.   <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
  5.   <title>Cím</title>  
  6.   <style type="text/css">  
  7.     html.js #loading {  
  8.       display: inline;  
  9.     }  
  10.     #loading,  
  11.     html.loaded #loading {  
  12.       display: none;  
  13.     }  
  14.     html.js .content {  
  15.       display: none;  
  16.     }  
  17.     html.loaded .content {  
  18.       display: block;  
  19.     }  
  20.   </style>  
  21. </head>  
  22. <body>  
  23.   <img src="http://www.google.hu/intl/en_com/images/logo_plain.png" id="loading" alt="loading">  
  24.   <div class="content">  
  25.     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
  26.     Proin vitae odio odio, sit amet sodales ligula.  
  27.     Nullam tortor ante, malesuada sed feugiat ac, cursus non turpis.  
  28.     Fusce at lectus eros, vehicula vehicula massa.  
  29.     Praesent dictum mollis pulvinar. Ut nisl enim, ornare a volutpat a,  
  30.     gravida vel neque. Maecenas quis quam a ligula bibendum suscipit  
  31.     quis sit amet dolor. Nunc dictum, orci ut dignissim dictum, orci metus  
  32.     venenatis libero, sit amet aliquet lectus felis ut est. Ut turpis ante,  
  33.     pellentesque vel aliquam ac, elementum non nunc. Nam dignissim enim non  
  34.     est aliquet molestie. Mauris at diam ligula, vitae feugiat ipsum.  
  35.     Pellentesque sollicitudin tincidunt massa, vitae sodales orci  
  36.     accumsan et.</p>  
  37.   </div>  
  38.   <script type="text/javascript">  
  39.   // Megnézzük, támogatott-e a `getElementsByTagName`.  
  40.   if (document.getElementsByTagName) {  
  41.     (function () {  
  42.       // Ha igen, akkor indul a tesztelés, megnézzük, megvan-e már a HTML elem.  
  43.       var html = document.getElementsByTagName('html');  
  44.   
  45.       if (html.length) {  
  46.         // Adunk neki osztályt, hogy CSS-sel el tudjuk rejteni a tartalmat.  
  47.         html[0].className = html[0].className ? html[0].className + ' js' : 'js';  
  48.   
  49.         window.onload = function () {  
  50.           // Várunk pár másodpercet  
  51.           setTimeout(function () {  
  52.             // Beállítjuk, hogy a tartalom be lett töltve,  
  53.             // ami CSS-sel megjeleníti a tartalmat.  
  54.             html[0].className += ' loaded';  
  55.   
  56.             // Eltávolítjuk a loading jelzőnket  
  57.             var loading = document.getElementById('loading');  
  58.             if (loading) {  
  59.               loading.parentNode.removeChild(loading);  
  60.             }  
  61.           }, 5000);  
  62.         }  
  63.   
  64.         // Megszakítjuk a loopot.  
  65.         return;  
  66.       }  
  67.   
  68.       // Folyamatosan tesztelünk, amíg meg nem szakítjuk.  
  69.       window.setTimeout(arguments.callee, 50);  
  70.     })();  
  71.   }  
  72.   </script>  
  73. </body>  
  74. </html>  
De azt áruld már el, honnan jöttek neked az ns4, ns6, ie4 változók, mivel ilyet kb a '90-es évek óta senki nem használ.
  • A fenti böngészők, már régen kihaltak,
  • Eleve ez a módszer már idejétmúlt, nem szép, és leginkább nem hatékony.
2

Koszonom! Eddig mukodik

szmegma · 2010. Már. 13. (Szo), 16.13
Koszonom!

Eddig mukodik rendesen minden bongeszoben amit kiprobaltam:

FF 3.6,
Opera 10.10,
IE 8.0,
Safari 4.0.5,
Avant 11.7,
Chrome 4.0.249,
Netscape 9.0.0.6

A kerdesem az lenne, hogy mukodik a fenti bongeszok regebbi verzioiban is, mert ha igen akkor ez a legjobb! :D

A cuccot vmelyik forumon talaltam, de a tied viszi a palmat!!!
3

getElementsByTagName

Poetro · 2010. Már. 13. (Szo), 16.23
Minden ami ismeri a getElementsByTagName függvényt, abban működni fog, és szinte minden böngésző IE5 óta tudja ezt.
4

:D

szmegma · 2010. Már. 13. (Szo), 17.28
Ertem!
Koszonom meg egyszer e remek kodot.
Udv!