Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [HTML][JavaScript][JAVA]Efektowne (animowane) ładowanie strony
Mayke512
post
Post #1





Grupa: Zarejestrowani
Postów: 16
Pomógł: 0
Dołączył: 6.11.2008

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

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ć?
Go to the top of the page
+Quote Post
marcio
post
Post #2





Grupa: Zarejestrowani
Postów: 2 291
Pomógł: 156
Dołączył: 23.09.2007
Skąd: ITALY-MILAN

Ostrzeżenie: (10%)
X----

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.


--------------------
Zainteresowania: XML | PHP | MY(SQL)| C# for .NET | PYTHON
http://code.google.com/p/form-builider/
Moj blog
Go to the top of the page
+Quote Post
Mayke512
post
Post #3





Grupa: Zarejestrowani
Postów: 16
Pomógł: 0
Dołączył: 6.11.2008

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

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
Go to the top of the page
+Quote Post
dk1342
post
Post #4





Grupa: Zarejestrowani
Postów: 275
Pomógł: 9
Dołączył: 24.07.2008
Skąd: Racibórz

Ostrzeżenie: (10%)
X----

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
?>


--------------------
Firefox - The Best,
Internet Exokier - shit
Go to the top of the page
+Quote Post
bim2
post
Post #5





Grupa: Zarejestrowani
Postów: 1 873
Pomógł: 152
Dołączył: 9.04.2006
Skąd: Berlin

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

Po co php, jak to jest javascript? ....


--------------------
» Hern.as
» Move to Apple Music
Go to the top of the page
+Quote Post
marcio
post
Post #6





Grupa: Zarejestrowani
Postów: 2 291
Pomógł: 156
Dołączył: 23.09.2007
Skąd: ITALY-MILAN

Ostrzeżenie: (10%)
X----

Bo wszystko jest zawarte w zmiennej $zawartosc i trzeba to jakos wyswietlic chyba ze sobie zmieni biggrin.gif


--------------------
Zainteresowania: XML | PHP | MY(SQL)| C# for .NET | PYTHON
http://code.google.com/p/form-builider/
Moj blog
Go to the top of the page
+Quote Post
lord_t
post
Post #7





Grupa: Zarejestrowani
Postów: 603
Pomógł: 131
Dołączył: 24.07.2007
Skąd: Górny Śląsk

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

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/ ?


--------------------
Błędy w JS? ------> Firebug (dla FF)
<>< Warto posłuchać.

Pisanie skryptów javaScript i jQuery.
Go to the top of the page
+Quote Post
marcio
post
Post #8





Grupa: Zarejestrowani
Postów: 2 291
Pomógł: 156
Dołączył: 23.09.2007
Skąd: ITALY-MILAN

Ostrzeżenie: (10%)
X----

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?


--------------------
Zainteresowania: XML | PHP | MY(SQL)| C# for .NET | PYTHON
http://code.google.com/p/form-builider/
Moj blog
Go to the top of the page
+Quote Post
Mayke512
post
Post #9





Grupa: Zarejestrowani
Postów: 16
Pomógł: 0
Dołączył: 6.11.2008

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

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

Ten post edytował Mayke512 6.11.2008, 21:32:46
Go to the top of the page
+Quote Post
bim2
post
Post #10





Grupa: Zarejestrowani
Postów: 1 873
Pomógł: 152
Dołączył: 9.04.2006
Skąd: Berlin

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

usun z poczatku <script>

i pewnie nie masz biblioteki mintAjax


--------------------
» Hern.as
» Move to Apple Music
Go to the top of the page
+Quote Post
marcio
post
Post #11





Grupa: Zarejestrowani
Postów: 2 291
Pomógł: 156
Dołączył: 23.09.2007
Skąd: ITALY-MILAN

Ostrzeżenie: (10%)
X----

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


--------------------
Zainteresowania: XML | PHP | MY(SQL)| C# for .NET | PYTHON
http://code.google.com/p/form-builider/
Moj blog
Go to the top of the page
+Quote Post
bim2
post
Post #12





Grupa: Zarejestrowani
Postów: 1 873
Pomógł: 152
Dołączył: 9.04.2006
Skąd: Berlin

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

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

Ten post edytował bim2 6.11.2008, 21:42:33


--------------------
» Hern.as
» Move to Apple Music
Go to the top of the page
+Quote Post
marcio
post
Post #13





Grupa: Zarejestrowani
Postów: 2 291
Pomógł: 156
Dołączył: 23.09.2007
Skąd: ITALY-MILAN

Ostrzeżenie: (10%)
X----

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


--------------------
Zainteresowania: XML | PHP | MY(SQL)| C# for .NET | PYTHON
http://code.google.com/p/form-builider/
Moj blog
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · 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: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

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

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