Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Preloader w Ajax
walko
post
Post #1





Grupa: Zarejestrowani
Postów: 1
Pomógł: 0
Dołączył: 6.10.2007

Ostrzeżenie: (0%)
-----

Witam,

chciałbym aby w czasie ładowania strony, zanim zostanie wczytana pojawiła się informacja o ladowaniu. Znalazłem gdzieś coś takiego:

test.html:
Kod
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>Test</title>
   <script language="JavaScript" type="text/javascript">
   function hideLoadingPage() {
       if (document.getElementById) {  // DOM3 = IE5, NS6
           document.getElementById('loading').style.visibility = 'hidden';
       }
       else {
           if (document.layers) {  // Netscape 4
               document.hidepage.visibility = 'hidden';
           }
           else {  // IE 4
               document.all.hidepage.style.visibility = 'hidden';
           }
       }
   }
   </script>
   </head>
   <body onload="hideLoadingPage()">
   <div id="loading" style="position: absolute; left:0px; top:0px; background-color: #999999; layer-background-color: white; height: 100%; width: 100%;filter:alpha(opacity=80);-moz-opacity:.80; opacity:.80;">
   <table width="100%" height="100%">
     <tr>
       <td align="center" valign="middle">
           <table width="300" align="center" bgcolor="#FFFFFF" border="0" >
             <tr>
               <td align="center" style="filter:alpha(opacity=100);-moz-opacity:.99; opacity:.991;"><img src=./js/litebox-1.0/images/loading.gif></td></tr><tr><td align="center"><b>Loading...</b></td>
             </tr>
           </table>
       </td>
     </tr>
   </table>
   </div>
  
   <!-- Tutaj właściwy kod strony -->
   </body>
   </html>

Działa to ładnie gdy stronę ładuję poprzez bezpośredni link ale w chwili gdy chcę to załadować z innej strony za pomocą:
Kod
<a href="javascript:ajaxpage('test.html', 'rightcolumn');">TEST</a>

ze strony

index.html:
Kod
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>Galeria</title>
   <script type="text/javascript">
  
   /***********************************************
   * Dynamic Ajax Content- Š Dynamic Drive DHTML code library (www.dynamicdrive.com)
   * This notice MUST stay intact for legal use
   * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
   ***********************************************/
  
   var bustcachevar=0 //bust potential caching of external pages after initial request? (1=yes, 0=no)
   var loadedobjects=""
   var rootdomain="http://"+window.location.hostname
   var bustcacheparameter=""
  
   function ajaxpage(url, containerid){
   var page_request = false
   if (window.XMLHttpRequest) // if Mozilla, Safari etc
   page_request = new XMLHttpRequest()
   else if (window.ActiveXObject){ // if IE
   try {
   page_request = new ActiveXObject("Msxml2.XMLHTTP")
   }
   catch (e){
   try{
   page_request = new ActiveXObject("Microsoft.XMLHTTP")
   }
   catch (e){}
   }
   }
   else
   return false
  
   page_request.onreadystatechange=function(){
   loadpage(page_request, containerid)
   }
   if (bustcachevar) //if bust caching of external page
   bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
   page_request.open('GET', url+bustcacheparameter)
   page_request.send(null)
   }
  
   function loadpage(page_request, containerid){
  
   if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
   document.getElementById(containerid).innerHTML=page_request.responseText
   }
  
   function loadobjs(){
   if (!document.getElementById)
   return
   for (i=0; i<arguments.length; i++){
   var file=arguments[i]
   var fileref=""
   if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
   if (file.indexOf(".js")!=-1){ //If object is a js file
   fileref=document.createElement('script')
   fileref.setAttribute("type","text/javascript");
   fileref.setAttribute("language","javascript");
   fileref.setAttribute("src", file);
   }
   else if (file.indexOf(".css")!=-1){ //If object is a css file
   fileref=document.createElement("link")
   fileref.setAttribute("rel", "stylesheet");
   fileref.setAttribute("type", "text/css");
   fileref.setAttribute("media","screen");
   fileref.setAttribute("href", file);
   }
   }
   if (fileref!=""){
   document.getElementsByTagName("head").item(0).appendChild(fileref)
   loadedobjects+=file+" " //Remember this object as being already added to page
   }
   }
   }
  
   </script>
  
   <style type="text/css">
   body{
       margin: 0;
       padding: 0;
   }
  
  
   #leftcolumn{
   float:left;
   width:150px;
   min-height: 400px;
   border: 2px solid black;
   padding: 5px;
   padding-left: 4px;
   text-align: left;
   background-color:#006600;
   }
  
   #leftcolumn a{
   padding: 3px 3px;
   display: block;
   width: 100%;
   text-decoration: none;
   font-weight: bold;
   border-bottom: 1px solid gray;
  
   }
   #leftcolumn A:Hover  {
       color : #FFFFFF;
       background-color : #009900;
       text-decoration : none;
   }
  
  
   #rightcolumn{
   float:left;
   width:750px;
   min-height: 400px;
   border: 2px solid black;
   margin-left: 10px;
   padding: 5px;
   padding-bottom: 8px;
   background-color:#FFFFFF;
   }
  
   * html #rightcolumn{ /*IE only style*/
   height: 400px;
   }
   * html #leftcolumn{ /*IE only style*/
   height: 400px;
   }
  
   A  {
       font-family : Verdana, Helvetica, Arial CE;
       color : #888FF8;
       text-decoration : none;
   }
  
   A:Visited  {
       font-family :  Verdana, Helvetica, Arial CE;
       color : #888FF8;
       text-decoration : none;
   }
   BODY  {
       font-size : 7pt;
       font-family : Verdana, Helvetica, Arial CE;
       color : #000000;
  
       background-colo: #ffffff;
       background-attachment: fixed
  
   }
   TD {
       font-size : 8pt;
       font-family : Verdana, Helvetica, Arial CE;
       color : #000000;
       overflow : none;
   }
  
  
   </style>
  
   <body>
  
  
   <center>
   <table>
   <tr><td>
   <div id="leftcolumn">
   <a href="javascript:ajaxpage('test.html', 'rightcolumn');">TEST</a>
  
   </div>
  
   <div id="rightcolumn"><h3>Choose a page to load.</h3></div>
   <td><tr>
  
   </table>
   </center>
  
   </body>
  
   </html>


to po kliknięciu linku ładuje się strona test.html ale niestety nie znika DIV - loading. Co przy bezpośrednim wywołaniu strony się dzieje. Wiec wygląda na to że poprzez załadowanie Ajaxem nie wykonuje się komenda z BODY onload pliku test.html

Jeszcze jedna uwaga apropos tego: chodzi o to aby onload zostało wykonane po całkowitym zakończeniou pobierania strony - strona test.html zawiera np. dużo grafik...

W jaki sposób można to obejść ?

Pozdrawiam

Walko

Ten post edytował walko 6.10.2007, 10:06:42
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 1)
rafaelb
post
Post #2





Grupa: Zarejestrowani
Postów: 49
Pomógł: 2
Dołączył: 17.01.2004

Ostrzeżenie: (0%)
-----

Na szybko co ustaliłem i sądzę ze to funkcja z pliku test.html hideLoadingPage() nie jest i nie będzie widziana przez plik index.html.
Poza tym bez zensu jest ładować w poprawny plik html znowu znaczników <html> ... <head>...</head><body>...</body> ... </html>.
Trzeba by było je usunąć lub ładować w iframe.
Jest jeszcze w pliku index.html blad: brak </head>

Coś tam zrobiłem
Tu masz 2 wersje http://rapidshare.com/files/68298868/preloadre_ajax.zip.html
Plik: 9kB

Wersja 1: Preloader w miejscu gdzie ładujesz pliki
Wersja 2: Preloader na całą stronę
Go to the top of the page
+Quote Post
« Następny starszy · XML, AJAX · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 19.08.2025 - 06:25
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn