Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jQuery] Preloader kilku img
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
Czadus
Hej. Napisałem sobie prosty preloader dla kilku obrazków. Jak ma on działać?? Otóż mamy banner działający z wykorzystaniem jQuery scrollable(). Ale aby nie widzieć na ekranie ładujących się obrazków bannera, chciałbym, aby całość pojawiła się i zaczęła działać po załadowaniu wszystkich obrazków. Ogólnie tak działa, czasami jednak nie pojawia się nic. Oto moja funkcja:

Kod
function preloadBanner() {
       var img = jQuery(".contentWrapperBannerInImage img");
       var loaded = 0;
       var count = img.length;
      
       img.each(function(i) {
           var tempSrc = jQuery(this).attr("src");
          
           jQuery(this).load(function() {
               loaded++;
               if (count == loaded) {
                   jQuery('.scrollable').css({ 'display': 'block' });
                   tworzScrollableBanner()
               }
           }).attr("src", tempSrc);
       });
   }

Jej wywołanie w head

Kod
<script type="text/javascript">
      jQuery(document).ready(function(){
             preloadBanner();
      });
  </script>

Z góry dziękuję za pomoc.

Dodam, że problem występuje pod Safari oraz Chrome, tak, jakby funkcja w ogóle nie wykonywała się. Wstawiłem alerta po linii

var count = img.length; i nic się nie wyświetlało, tym samym ładowania obrazków też nie wykonuje się. Dlaczego tak się dzieje?? Gdzie leży tego przyczyna??
erix
Odpal konsolę błędów i pokaż co nieco z treści.
Czadus
Hej, konsole nic nie pokazuje właśnie, błędu nie ma. Preloader działa jak chce, czy on jest w ogóle poprawnie napisany?? Głupia rzecz, ale nie wiem czy czasami trochę nie pomogło dodanie jednej linii:

Kod
function preloadBanner() {
       var img = jQuery(".contentWrapperBannerInImage img");
       var loaded = 0;
       var count = img.length;
      
       img.each(function(i) {
           var tempSrc = jQuery(this).attr("src");
           jQuery(this).attr("src","");
          
           jQuery(this).load(function() {
               loaded++;
               if (count == loaded) {
                   jQuery('.scrollable').css({ 'display': 'block' });
                   tworzScrollableBanner()
               }
           }).attr("src", tempSrc);
       });
   }
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.