Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][JavaScript][JAVA]Efektowne (animowane) ładowanie strony
Forum PHP.pl > Forum > Przedszkole
Mayke512
6.11.2008, 16:41:57
Nie wiem nawet w jakim to zrobić języku tongue.gif
Mam stronkę w html-u. Jest na niej bardzo dużo grafiki, która się dość długo ładuje. Chciałbym zrobić efektowne ładowanie - pasek postępu lub takie obracające się kółko jak podczas ładowania filmów na youtube. Tylko chciałbym - i to jest najważniejsze - aby w czasie pokazywania tego komunikatu "Ładowanie strony" i paska postępu grafika i inne pliki ładowały się. Gdy pliki zostały by już ściągnięte na dysk komputera i gotowe do odczytu użydkownikowi otworzyła by się załadowana już strona. Da się coś takiego zrobić?
marcio
6.11.2008, 16:57:04
Po co Java??

Pasek postepu zrobisz tylko w Flash.

Co do obrazka luk tekstu gdy strona sie laduje to polecam mintAjax a oto kod ktory ja uzywam do takiego czegos:
Kod
$zawartosc = '<script type="text/javascript" src="../cms/mintAjax.js"></script>
<script>
var req = null;

function ShowContent() {
   $("tresc_ajax").innerHTML = req.responseText;
   mint.fx.Fade("tresc_ajax", 90, 10, 2000);

}

function strona(cel) {

   req = mint.Request();
   req.AddParam("parametr",cel);
  
req.OnLoading = function() {
$("loader").style.display = "block";
$("loader").innerHTML = "<img src=\'./grafiki/modules/loading.gif\'>";
}

req.OnLoaded = function() { $("loader").style.display = "none"; }

   req.OnSuccess = function() {
      
      mint.fx.Fade("tresc_ajax", 10, 10, 500, null, ShowContent);
   }
  
   req.Send("./system/modules/f_m_news.php")
}

</script>';


$zawartosc .= '<body onload="strona();">
<div id="loader" style="display: none; text-align:center;"></div>
<div id="tresc_ajax"></div>';


Jest to dokladnie to co ty mowisz + taki fajny efekt podczac ladowania strony.


Tu masz takie obrazki http://www.darmowegrafiki.5m.pl/loadery_ajax.php

Tu masz Preloader http://www.flashzone.pl/item/1228/Preloader/

Cos z google http://www.google.pl/search?hl=pl&q=pr...&lr=lang_pl

Ostatnio do tego widzialem bardzo fajny kurs Flash'a chyba na Republice lecz nie potrafie go znalesc duzo bajerow tam bylo.
Mayke512
6.11.2008, 17:50:28
No dodałem jave bo nie wiedziałem w jakim to języku zrobić tongue.gif
A gdzie to mam wstawić (źródło mojej strony tutaj: www.salon-script.pl)
Dzięki za pomoc
dk1342
6.11.2008, 19:16:07
lol jak gdzie ?
po 1 musisz zmienić rozszeżenie z html na php a ten kod co jest wyżej wstawiasz w znaczniki

<?php
//tu kod
?>
bim2
6.11.2008, 19:42:07
Po co php, jak to jest javascript? ....
marcio
6.11.2008, 19:51:49
Bo wszystko jest zawarte w zmiennej $zawartosc i trzeba to jakos wyswietlic chyba ze sobie zmieni biggrin.gif
lord_t
6.11.2008, 21:20:40
Cytat(marcio @ 6.11.2008, 16:57:04 ) *
[...]Pasek postepu zrobisz tylko w Flash.[..]


Oczywiście, tylko w flashu.. pff
-a pasek przyładowaniu załączników na poczcie o2?
-a ładowanie takie jak tu: http://smakryzyka.pl/ ?
marcio
6.11.2008, 21:23:12
No nie pff mi wiadomo ze tylko we Flash zreszta jak mozna zrobic cos takiego w JS jesli on dziala po stronie przegladarki?

Jka js moze sprawdzac ile strony pobrano?
Mayke512
6.11.2008, 21:32:27
Zrobiłem coś takiego

Kod
<?php
<script>$zawartosc = '<script type="text/javascript" src="../cms/mintAjax.js">

var req = null;

function ShowContent() {
   $("tresc_ajax").innerHTML = req.responseText;
   mint.fx.Fade("tresc_ajax", 90, 10, 2000);

}

function strona(cel) {

   req = mint.Request();
   req.AddParam("parametr",cel);
  
req.OnLoading = function() {
$("loader").style.display = "block";
$("loader").innerHTML = "<img src=\'Obrazki\inne\kolo-loading.gif>";
}

req.OnLoaded = function() { $("loader").style.display = "none"; }

   req.OnSuccess = function() {
      
      mint.fx.Fade("tresc_ajax", 10, 10, 500, null, ShowContent);
   }
  
   req.Send("./system/modules/f_m_news.php")
}

</script>';


$zawartosc .= '<body onload="strona();">
<div id="loader" style="display: none; text-align:center;"></div>
<div id="tresc_ajax"></div>';
?>


Proszę naprawcie bo wywala mi błędy na stronie
bim2
6.11.2008, 21:34:16
usun z poczatku <script>

i pewnie nie masz biblioteki mintAjax
marcio
6.11.2008, 21:36:58
http://mintajax.pl/Pobierz/ przedostatni link biggrin.gif i zrob tylko tak

[PHP] pobierz, plaintext 
  1. <?php
  2. $zawartosc = '<script type="text/javascript" src="../cms/mintAjax.js">
  3.  
  4. var req = null;
  5.  
  6. function ShowContent() {
  7.    $("tresc_ajax").innerHTML = req.responseText;
  8.    mint.fx.Fade("tresc_ajax", 90, 10, 2000);
  9.  
  10. }
  11.  
  12. function strona(cel) {
  13.  
  14.    req = mint.Request();
  15.    req.AddParam("parametr",cel);
  16.    
  17. req.OnLoading = function() { 
  18. $("loader").style.display = "block";
  19. $("loader").innerHTML = "<img src='Obrazkiinnekolo-loading.gif>"; 
  20. }
  21.  
  22. req.OnLoaded = function() { $("loader").style.display = "none"; }
  23.  
  24.    req.OnSuccess = function() {
  25.       
  26.       mint.fx.Fade("tresc_ajax", 10, 10, 500, null, ShowContent);
  27.    }
  28.    
  29.    req.Send("./system/modules/f_m_news.php")
  30. } 
  31.  
  32. </script>';
  33.  
  34.  
  35. $zawartosc .= '<body onload="strona();">
  36. <div id="loader" style="display: none; text-align:center;"></div>
  37. <div id="tresc_ajax"></div>';
  38.  
  39. echo($zawartosc);
  40. ?>
[PHP] pobierz, plaintext


Oczywiscie masz plik f_m_news.php a w nim odpowiedz na pytanie ajax'a? biggrin.gif
bim2
6.11.2008, 21:42:00
No własnie, na chusteczke tutaj ajax?

Tutaj masz, a nie kombinujecie:
http://www.roscripts.com/Javascript_image_preloader-111.html
Demo:
http://www.roscripts.com/uploads/javascrip..._preloader.html
marcio
6.11.2008, 21:45:52
Ja nie widze zadnego postepowania w % prawdziwy preloader to tylko w Flash a ten kod co podalem to taki pseudo "preloader" z milym efektem wiec nie wiem po co kombinowac z tym js
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.