Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> preloader zdjecia, javascript
andixxx
post
Post #1





Grupa: Zarejestrowani
Postów: 104
Pomógł: 0
Dołączył: 1.06.2006
Skąd: Legnica

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

jak zrobic preloader do 1 pliku graficznego, ktory podczas wczytywania go pokaze w miejscu obrazka inny obrazek ?(np loading.gif)
i aby dzialal pod najpopularniejszymi przegladarkami typu ie ff opera etc

Ten post edytował andixxx 15.08.2006, 19:39:54
Go to the top of the page
+Quote Post
batman
post
Post #2





Grupa: Moderatorzy
Postów: 2 921
Pomógł: 269
Dołączył: 11.08.2005
Skąd: 127.0.0.1




 
[HTML] pobierz, plaintext 
  1. <img src="foto1.gif" lowsrc="foto2.gif" />
[HTML] pobierz, plaintext


LOWSRC ładuje obrazek o małych rozmiarach nim właściwy obrazek się załąduje.

Zapomniałem dodać, że działa na IE. W FF i Operze nie wiem.

Ten post edytował batman 15.08.2006, 19:45:23
Go to the top of the page
+Quote Post
-Gość-
post
Post #3





Goście
batman nie dziala .. dalem duze 2,5 mb foto do wczytania i od razu sie pokazuje... maly obrazek sie nie pokazuje w tym czasie gdy sie wczytuje
Go to the top of the page
+Quote Post
ActivePlayer
post
Post #4





Grupa: Przyjaciele php.pl
Postów: 1 224
Pomógł: 40
Dołączył: 6.07.2004
Skąd: Wuppertal

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

[HTML] pobierz, plaintext 
  1. <div style="background-image: url('loading.gif'); width: 300px; height: 200px;">
  2. <img src="..." style="width: 300px; height: 200px;" />
  3. </div>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
-Gość-
post
Post #5





Goście
ActivePlayer nie bardzo mi chodzilo o taki efekt, bo ten twoj tworzy diva z tlem w ktorym jest obrazek, ktory powinien pokazac sie podczas wczytywania, powinien on przyslonic obrazek wczytywany a nie byc podnim i stopniowo zaslaniany przec wczytywany obraz..

chodzi mi dokladnie o taki PRELOADER w js, klikam na link pokazuje sie obrazek loading.gif a w tle pod nim wczytuje sie zdjecie.. gdy zostanie wczytane w 100% obrazek loadingu znika i pojawia sie juz wczytany duzy obraz..(IMG:http://forum.php.pl/style_emoticons/default/exclamation.gif) a nie na odwrot ;p
Go to the top of the page
+Quote Post
andixxx
post
Post #6





Grupa: Zarejestrowani
Postów: 104
Pomógł: 0
Dołączył: 1.06.2006
Skąd: Legnica

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

[PHP] pobierz, plaintext 
  1. <?php
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  3. <html>
  4. <head>
  5. <title>Image Preloader</title>
  6. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  7. <script language="JavaScript" type="text/JavaScript">
  8. <!--
  9. window.onerror = doNothing;
  10. function doNothing(){
  11. return true;
  12. }
  13. preloader();
  14. var image1 = new Image;
  15. image1.src = "duze.jpg";
  16. var begin = true;
  17. image1.onload = picPlacer;
  18. var messages = new Array("Your images are loading","Your images are loading.","Your images are loading..","Your images are loading...","Your images are loading..","Your images are loading.");
  19. var counter = 0;
  20. function preloader(){
  21. if(begin==true)
  22. if(document.getElementById){
  23. document.getElementById("holder").innerHTML = "<font color="#000000">"+messages[counter]+"</font>";
  24. }else if(document.all&&!document.getElementById){
  25. document.all.holder.innerHTML = "<font color="#000000">"+messages[counter]+"</font>";
  26. }
  27. counter++;
  28. if(counter==6){
  29. counter = 0;
  30. }homer = setTimeout("preloader()",200);
  31. }
  32. function picPlacer(){
  33. if(document.getElementById){
  34. document.getElementById("picplacer").src = image1.src;
  35. document.getElementById("picplacer").style.height = "250";
  36. document.getElementById("holder").innerHTML='';
  37. }else if(document.all&&!document.getElementById){
  38. document.all.picplacer.src = image1.src;
  39. document.all.picplacer.style.height = "250";
  40. document.all.holder.innerHTML='';
  41. }
  42. clearTimeout(homer);
  43. }
  44. //-->
  45. </script>
  46.  
  47. </head>
  48.  
  49. <body>
  50. <table width="50%" border="0" align="center" style="font-family:Verdana,sans-serif;font-size:11px">
  51.   <tr> 
  52. 	<td align="center" valign="top"><img src="spacer.gif" name="picplacer" id="picplacer"></td>
  53.   </tr>
  54.  
  55.   <tr> 
  56. 	<td align="left" valign="top"><span id="holder"> </span></td>
  57.   </tr>
  58. </table>
  59. </body>
  60. </html>
  61. ?>
[PHP] pobierz, plaintext
Go to the top of the page
+Quote Post
LBO
post
Post #7





Grupa: Zarejestrowani
Postów: 1 415
Pomógł: 117
Dołączył: 7.09.2005
Skąd: Warszawa

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

Całkiem niedawno zrobiłem podobny preloader. Starałem się, żeby był jak najbardziej semantyczny i dostępny (sladowa ingerencja w kod HTML). Czekam na ewentualne poprawki lub rozszerzenia funkcjonalności, bo bardzo nie lubie pisać w JavaScripcie, tym bardziej obiektowo i mozliwe, że narobiłem śmietnik.

JavaScript Specified Image Preloader

Tylko zdjęcia z przypisana klasą preload są preload'owane, reszta ładuję się zwyczajnie.

Trzeba pamietać, by na konńcu pliku HTML (ewentualnie tuż po ostatnim zdjeciu przeznaczonym do preload'u) dodać:
[HTML] pobierz, plaintext 
  1. <script type="text/javascript">
  2. //<![CDATA[
  3.     Preloader.init();
  4. //]]>
  5. </script>
[HTML] pobierz, plaintext


I link bezposrednio do pliku js - link
Go to the top of the page
+Quote Post
andixxx
post
Post #8





Grupa: Zarejestrowani
Postów: 104
Pomógł: 0
Dołączył: 1.06.2006
Skąd: Legnica

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

LBO sluchaj testuje sobie Twoj skrypt i znalazlem taki problem.. tzn wszystko dziala dobrze ale jak wgrywam zdjecie o wymiarach np 1104x832 to pokazuje sie ono na stronie w 100% wymiarach mimo, ze:
[HTML] pobierz, plaintext 
  1. <div>
  2. <img src="galeria/foto/'.$foto.'.jpg" alt="" width="200" height="150" class="preload" />
  3. </div>
[HTML] pobierz, plaintext
tutaj ma okreslone wymiary.. ale gry usune z kodu ten fragment
[HTML] pobierz, plaintext 
  1. <head>
  2. <script src="galeria/preloader-0.1.js" type="text/javascript"></script>
  3. </head>
[HTML] pobierz, plaintext
to zdjecie otwiera sie w okreslonych rozmiarach tzn 200x150 ale z koleji nie preloaduje sie;/ jak ustawic (podejrzewam ze gdzies w pliku preloader-0.1.js) aby kazde preloadowane zdjecie mialo rozmiar np 200x150 ?

Ten post edytował andixxx 18.08.2006, 12:29:50
Go to the top of the page
+Quote Post
LBO
post
Post #9





Grupa: Zarejestrowani
Postów: 1 415
Pomógł: 117
Dołączył: 7.09.2005
Skąd: Warszawa

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

Wersja 0.2 juz dostepna (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) Hehehe, zawsze chciałem to napisać. Musisz zmodyfikować tylko sekcję HEAD, bo nazwa pliku .js się zmieniła.

Pisz do mnie, jakbyś chciał jakieś dodatki, czy efekty.

Pozdrowienia.

edit:

Oczywiście, wszystko dostepne pod tym samym adresem: http://alanbem.info/projects/javascript_sp...mage_preloader/

Ten post edytował LBO 18.08.2006, 13:24:52
Go to the top of the page
+Quote Post
andixxx
post
Post #10





Grupa: Zarejestrowani
Postów: 104
Pomógł: 0
Dołączył: 1.06.2006
Skąd: Legnica

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

hehe dzieki LBO dziala teraz wszystko tak jak powinno:) a jak czegos bedzie brakowac mi, to usmiechne sie do Ciebie (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) pozdro (IMG:http://forum.php.pl/style_emoticons/default/guitar.gif)
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 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: 24.08.2025 - 13:36
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn