Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: obrazek "ładowanie" przed załadowaniem zdjęcia - jak to ugryść?
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
InosU31
Witam wszystkich

Mam kłopot i nie mogę sobie z tym poradzić sad.gif a mianowicie... Zrobiłem sobie miniaturki i po kliknięciu otwiera mi się większe zdjęcie... Chciałbym aby w czasie ładowania zdjęcia (bądź zanim załaduje się zdjęcie) pokazywał się gif z ładowaniem... Po części udało mi się to zrobić z tym że ustawiłem gifa ładującego na przeźroczystość i niestety zdjęcia ładują się tez przeźroczyste (z tego względu że umieszczone są w bloku zawierającym ładujący obrazek) - jak postawię osobno ten blok div to nie działa mi obrazek ładujący

będę wdzięczny za jakieś podpowiedzi

ponizej kod jquery i html




  1.  
  2. css;
  3.  
  4. div#loading_mini {
  5. background: url(../loadin2.gif) no-repeat center center;
  6. width:100%;
  7. height:100%;
  8. display:none;
  9.  
  10. }
  11.  
  12. .fotki {
  13. display: none;
  14.  
  15. }
  16.  
  17.  
  18.  
  19.  
  20.  
  21. //---- miniaturki ---------------
  22.  
  23. $('img[rel]').click(function () {
  24. var rel = $(this).attr("rel");
  25.  
  26. $('.fotki').hide();
  27. $('#loading_mini').css("opacity",0.5).show(); //div zawierajacy obrazek ladowania
  28.  
  29. if ($('.fotki').load())
  30. {
  31. $('#loading_mini').css("opacity",1);
  32. $("div#"+rel).fadeIn('slow')
  33. }
  34.  
  35.  
  36. });
  37.  
  38. <!--miniaturki-->
  39. <div id="foto_mini">
  40.  
  41. <div id="pokaz" style="display:none">
  42. <div class="image_mini_panel"><div id="miniaturki"><img src="user_page/id_2/mini/mini_foto1.jpg" rel="fotka3"></img></div></div>
  43. <div class="image_mini_panel"><div id="miniaturki"><img src="user_page/id_2/mini/mini_foto2.jpg" rel="fotka2"></img></div></div>
  44. <div class="image_mini_panel"><div id="miniaturki"><img src="user_page/id_2/mini/mini_foto3.jpg" rel="fotka1"></img></div></div>
  45.  
  46. </div>
  47.  
  48. </div>
  49.  
  50.  
  51. <!---duze fotki -->
  52. <div id="zdjecie">
  53. <div id="loading_mini">
  54. <div class="fotki" id="fotka1"><img src="user_page/id_2/duze_foto1.jpg"></img></div>
  55. <div class="fotki" id="fotka2"><img src="user_page/id_2/duze_foto2.jpg"></img></div>
  56. <div class="fotki" id="fotka3"><img src="user_page/id_2/duze__foto3.jpg"></img></div>
  57. </div>
  58. </div>
  59.  
  60.  



Pozdrawiam
Comandeer
A może:
Kod
img {
    background: url( loader.gif) no-repeat center center;
}

wink.gif
InosU31
Cytat(Comandeer @ 26.04.2016, 18:58:06 ) *
A może:
Kod
img {
    background: url( loader.gif) no-repeat center center;
}

wink.gif



dzięki za odpowiedź... tylko gdzie ja mam to wstawić bo taki wpis mam już w bloku loading_mini... wink.gif

Pozdrawiam
Comandeer
Bezpośrednio do img, czyli do elementu, w którym wyświetlane jest duże zdjęcie.
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.