Forum PHP.pl > Preloader w Ajax

Pomoc - Szukaj - Użytkownicy - Kalendarz

walko

6.10.2007, 08:28:01

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

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

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

rafaelb

8.11.2007, 15:38:54

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ę

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.