Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> preloader zdjecia, javascript
andixxx
post 15.08.2006, 19:37:55
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 15.08.2006, 19:43:00
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


--------------------
I would love to change the world, but they won't give me the source code.
My software never has bugs. It just develops random features.
Go to the top of the page
+Quote Post
-Gość-
post 15.08.2006, 20:33:25
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 15.08.2006, 20:48:29
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 15.08.2006, 20:56:15
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..exclamation.gif a nie na odwrot ;p
Go to the top of the page
+Quote Post
andixxx
post 16.08.2006, 10:44:22
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 17.08.2006, 10:20:06
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 18.08.2006, 11:51:27
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 18.08.2006, 13:19:00
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 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 18.08.2006, 13:32:51
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 smile.gif pozdro guitar.gif
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 Wersja Lo-Fi Aktualny czas: 15.07.2025 - 02:44
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn