Kirjautuminen

Haku

Tehtävät

Keskustelu: Koodit: JavaScript: AJAX-sivulatausanimaatio

walkout_ [06.07.2007 19:50:43]

#

En tiedä onko tästä paljon hyötyä muuten kun se on kiva. Tässä vähän ohjetta ja loput lajuaakin sit listauksista.

Seuraava koodi näyttää latausruudun kun mikä tahansa AJAX-kutsu tehdään sivulla.

$("#loading").ajaxStart(function(){
  $(this).show();
});

Seuraava koodi piilottaa latausruudun kun AJAX-kutsu on suoritettu eli kaikki sisältö ladattu, jonka AJAX-kutsun oli märää hakea. Eli jos AJAX-kutsu tehdään GET-muuttujineen index.php tiedostoon luonnollisesti latauskuvaruutu näkyy niin kauan kun kaikki HTML-sisältö on ladattu kuvineen yms.

$("#loading").ajaxStop(function(){
  $(this).hide();
});

Seuraava PHP-koodi tekee JavaScript-koodin, joka tekee dynaamisesti aina sivulatauksen tapahtuessa AJAX-kutsun osoitteeseen index.php?page=jokusivu&lang=jokukieli. Muuta tämä koodi oma sivuasi tai koodaustyötäsi vastaavaksi.

<?php

if (!isset($_GET['page'])) {$_GET['page']="";}
if (!isset($_GET['lang'])) {$_GET['lang']="";}

         echo "\n <script type=\"text/javascript\"> \n
        window.onload = function(){ \n
            $.ajax({ \n
            type: \"GET\", \n
            url: \"index.php?page=".$_GET['page']."&lang=".$_GET['lang']."\", \n
            dataType: \"xml\" \n
             }) \n
        } \n
     </script> \n ";
?>

lisää listauksen index.php JavaScriptit omaan koodisi ja muista laittaa loading.gif animaatio images-kansioon ja lataa tämä js-kansioon nimellä jquery.pack.js.

Tämä ei toimi MSIE-selaimissa 100% varmuudella. Eli joskus satunnaisesti latausruutu jää päälle. Minulla on kyllä koodi joka toimii lähes kaikissa ja varmemmin kuin tämä joka on tehty moo.fx nimisen Open Source AJAX-kikkareen päälle.

index.php

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Lataus</title>
<script type="text/javascript" src="js/jquery.pack.js"></script>

<?php

if (!isset($_GET['page'])) {$_GET['page']="";}
if (!isset($_GET['lang'])) {$_GET['lang']="";}

         echo "\n <script type=\"text/javascript\"> \n
        window.onload = function(){ \n
            $.ajax({ \n
            type: \"GET\", \n
            url: \"index.php?page=".$_GET['page']."&lang=".$_GET['lang']."\", \n
            dataType: \"xml\" \n
             }) \n
        } \n
     </script> \n ";
?>

</head>

<body>
<!-- lataus -->
<script type="text/javascript">
document.writeln('<img id="image" src="images/loading.gif" alt="loading" style="z-index: 500; position: fixed; left: 50%; top: 50%;" />');

        $("#image").ajaxStart(function(){
        $(this).show();
        });

         $("#image").ajaxStop(function(){
         $(this).hide();
        });

document.writeln('<div id="loading" style="z-index: 500; position: fixed; left: 0px; top: 0px; width:100%; height: 100%; background-color:#000000; -moz-opacity: 0.6; opacity:.60; filter: alpha(opacity=60);">');
document.writeln('</div>');

        $("#loading").ajaxStart(function(){
        $(this).show();
        });

         $("#loading").ajaxStop(function(){
         $(this).hide();
        });

</script>

<!-- lataus -->
</body>
</html>

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Tietoa sivustosta