Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: preloader zdjecia
Forum PHP.pl > Forum > Przedszkole
andixxx
15.08.2006, 19:37:55
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
batman
15.08.2006, 19:43:00 
[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.
Gość
15.08.2006, 20:33:25
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
ActivePlayer
15.08.2006, 20:48:29 
[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ść
15.08.2006, 20:56:15
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
andixxx
16.08.2006, 10:44:22 
[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
LBO
17.08.2006, 10:20:06
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
andixxx
18.08.2006, 11:51:27
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 ?
LBO
18.08.2006, 13:19:00
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/
andixxx
18.08.2006, 13:32:51
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
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.