kostenloser Webspace werbefrei: lima-city

jQuery div ziegen, wenn geladen

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   fvg

   fvg hat kostenlosen Webspace.

   15:13, 30.9.2011

   Hallo,
   
   ich habe auf einer Seite einen Image-Slider. Ich möchte diesen jedoch erst zeigen, wenn die Bilder geladen sind. Ich habe es mal so probiert:
   
   

   .scripted #featured {
   	display: none;
   }

   
   
   

   jQuery.noConflict();
   jQuery(document).ready(function() {
   	//jQuery('#featured').css('display', 'none');
   	jQuery('html').addClass('scripted');
   	jQuery('#featured').slideDown(3500);
   });

   
   
   Das scheint zu funktionieren, ich hatte jedoch noch kein Internet was langsam genug war um das zu testen ;)
   Ich würde jetzt aber lieber die Bilder nur dann auf diese Art anzeigen, wenn sie wirklich nicht geladen sind. So nervt das bei jedem Seitenaufruf ein bisschen, eigentlich müssten die Bilder doch gecached werden, oder nicht?
   
   LG
   
   EDIT
   
   BOAH, das sollte im Titel natürlich "zeigen" heißen, kann man aber anscheinend nicht ändern...
   
   Beitrag zuletzt geändert: 30.9.2011 15:15:06 von fvg

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. m******************r

   0:58, 1.10.2011

   Hallo!
   
   Ich könnte mit folgendes vorstellen:
   Du könntest an jedes Bild, dass du lädst, einen load-EventHändler hängen, bei jedem Aufruf einen Zähler erhöhen und wenn der Zähler die Anzahl der zu ladenden Bilder erreicht hat, zeigst du dein Div:
   
   

   var picsLoaded = 0,
       $img = $("<img/>")
           .attr("src", "Pfad")
           .attr("alt", "alt-Text")
           .bind("load", onPictureLoad)
           .appendTo($("#featured"));
   .
   .
   .
   function onPictureLoad(event)
   {
       picsLoaded++;
   
       if (picsLoaded == [anzahlPics])
       {
          $("#featured").slideDown(3500);
       }
   }

   
   
   Lg

4. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?