Bilder Ladezeiten

adipics.de · 13. September 2010

Hallo alle zusammen,

habe ein recht nerviges Problem und komm selber nicht drauf an was das liegen könnte. Hab das selber suchen jetzt aufgegeben und frag mal die Profis.

Auf meiner Seite <a class="postlink" href="http://www.adipics.de">http://www.adipics.de</a> hab ich eine CSS Galerie gemacht. (Unterer Teil "Event", "Menschen", "Tiere" usw...)

Bilderansicht klein - 224 x 149px
Bilderansicht groß - 900 x 600 px

Die Galerien laden allerdings ewig obwohl zum anzeigen erst mal das kleine Bild geladen werden sollte. Laden doch die großen? Wenn ja - warum?

Wäre ne rießen Hilfe wenn mir da jemand nen Tip geben könnte.

Grüße

Adi

Basi · 13. September 2010

Du hast in deinem Quellcode alle Bilder stehen, also laden auch alle :wink:

Irgendwie ist diese Galerie auch mehr so ein Geschicklichkeitsspiel oder?

adipics.de · 13. September 2010

Hmm ok, also laden schon die kleinen, aber weils so viele sind schläfts halt ein, oder? D.h. Quali runter schrauben bei den kleinen würd evtl. was bringen... War mir jetzt immer blos nicht sicher was da geladen wird, aber können ja eigentlich nur die kleinen sein. Ein Kumpel hat schon gemeint dass Java da evtl. mit denkt und die großen läd weil es weiß, dass es bei den großen endet.

Ich weiß das das Ding bissel kompliziert zu bedienen is, aber hat mir irgendwie gefallen.

Auf jeden Fall mal n dickes Danke für die Antwort... hat doch n bissel geholfen...

Basi · 14. September 2010

Dein Quellcode aus dem Bereich Tiere (völlig random gewählt), da stehen eindeutig alle kleinen und großen:

Code

<div id="content"> 

					<div class="eventgalerie"> 
 
						<ul class="reiter">	    						

    						<li class="reiter"><a class="set" href="#kornnattern">Kornnattern</a> 
    							<ul> 
   									<li><a href="#kornnattern"><img src="pics/kornis-k(1).jpg" alt="Kornnattern" title="Kornnattern" /> 
                                    <img class="large" src="pics/kornis (1).jpg" alt="Kornnattern" title="Kornnattern" /></a></li> 

                                    <li><a href="#kornnattern"><img src="pics/kornis-k(2).jpg" alt="Kornnattern" title="Kornnattern" /> 
                                    <img class="large" src="pics/kornis (2).jpg" alt="Kornnattern" title="Kornnattern" /></a></li> 

                                    <li><a href="#kornnattern"><img src="pics/kornis-k(3).jpg" alt="Kornnattern" title="Kornnattern" /> 
                                    <img class="large" src="pics/kornis (3).jpg" alt="Kornnattern" title="Kornnattern" /></a></li> 

                                    <li><a href="#kornnattern"><img src="pics/kornis-k(4).jpg" alt="Kornnattern" title="Kornnattern" /> 
                                    <img class="large" src="pics/kornis (4).jpg" alt="Kornnattern" title="Kornnattern" /></a></li> 

                                    <li><a href="#kornnattern"><img src="pics/kornis-k(5).jpg" alt="Kornnattern" title="Kornnattern" /> 
                                    <img class="large" src="pics/kornis (5).jpg" alt="Kornnattern" title="Kornnattern" /></a></li> 

                                    <li><a href="#kornnattern"><img src="pics/kornis-k(6).jpg" alt="Kornnattern" title="Kornnattern" /> 
                                    <img class="large" src="pics/kornis (6).jpg" alt="Kornnattern" title="Kornnattern" /></a></li>                                    

                                    <li><a href="#kornnattern"><img src="pics/kornis-k(8).jpg" alt="Kornnattern" title="Kornnattern" /> 
                                    <img class="large" src="pics/kornis (8).jpg" alt="Kornnattern" title="Kornnattern" /></a></li> 

                                    <li><a href="#kornnattern"><img src="pics/kornis-k(9).jpg" alt="Kornnattern" title="Kornnattern" /> 
                                    <img class="hlarge" src="pics/kornis (9).jpg" alt="Kornnattern" title="Kornnattern" /></a></li>								
                                </ul> 
							</li> 
 
 
							<li class="reiter"><a class="set" href="#reptilien">Reptilien</a> 
								<ul>									
                                    <li><a href="#reptilien"><img src="pics/reptis-k(1).jpg" alt="Chamäleon" title="Reptilien" /> 
                                    <img class="hlarge" src="pics/reptis (1).jpg" alt="Chamäleon" title="Reptilien" /></a></li> 

                                    <li><a href="#reptilien"><img src="pics/reptis-k(2).jpg" alt="Skink" title="Reptilien" /> 
                                    <img class="large" src="pics/reptis (2).jpg" alt="Skink" title="Reptilien" /></a></li> 

                                    <li><a href="#reptilien"><img src="pics/reptis-k(3).jpg" alt="Bartagame" title="Reptilien" /> 
                                    <img class="large" src="pics/reptis (3).jpg" alt="Bartagame" title="Reptilien" /></a></li> 

                                    <li><a href="#reptilien"><img src="pics/reptis-k(4).jpg" alt="Grüner Baumpython" title="Reptilien" /> 
                                    <img class="large" src="pics/reptis (4).jpg" alt="Grüner Baumpython" title="Reptilien" /></a></li> 

                                    <li><a href="#reptilien"><img src="pics/reptis-k(5).jpg" alt="Bartagame" title="Reptilien" /> 
                                    <img class="hlarge" src="pics/reptis (5).jpg" alt="Bartagame" title="Reptilien" /></a></li> 

                                    <li><a href="#reptilien"><img src="pics/reptis-k(6).jpg" alt="Kupferkopf" title="Reptilien" /> 
                                    <img class="large" src="pics/reptis (6).jpg" alt="Kupferkopf" title="Reptilien" /></a></li> 

                                    <li><a href="#reptilien"><img src="pics/reptis-k(7).jpg" alt="" title="Reptilien" /> 
                                    <img class="large" src="pics/reptis (7).jpg" alt="" title="Reptilien" /></a></li> 

                                    <li><a href="#reptilien"><img src="pics/reptis-k(8).jpg" alt="" title="Reptilien" /> 
                                    <img class="large" src="pics/reptis (8).jpg" alt="" title="Reptilien" /></a></li>								
                                </ul> 
							</li> 


                            <li class="reiter"><a class="set" href="#katzen">Katzen</a> 
								<ul>                                
									<li><a href="#katzen"><img src="pics/katzen-k(1).jpg" alt="" title="Katzen" /> 
                                    <img class="large" src="pics/katzen (1).jpg" alt="" title="Katzen" /></a></li> 

                                    <li><a href="#katzen"><img src="pics/katzen-k(2).jpg" alt="" title="Katzen" /> 
                                    <img class="large" src="pics/katzen (2).jpg" alt="" title="Katzen" /></a></li> 

                                    <li><a href="#katzen"><img src="pics/katzen-k(3).jpg" alt="" title="Katzen" /> 
                                    <img class="large" src="pics/katzen (3).jpg" alt="" title="Katzen" /></a></li> 

                                    <li><a href="#katzen"><img src="pics/katzen-k(4).jpg" alt="" title="Katzen" /> 
                                    <img class="large" src="pics/katzen (4).jpg" alt="" title="Katzen" /></a></li> 

                                    <li><a href="#katzen"><img src="pics/katzen-k(5).jpg" alt="" title="Katzen" /> 
                                    <img class="large" src="pics/katzen (5).jpg" alt="" title="Katzen" /></a></li> 

                                    <li><a href="#katzen"><img src="pics/katzen-k(6).jpg" alt="" title="Katzen" /> 
                                    <img class="large" src="pics/katzen (6).jpg" alt="" title="Katzen" /></a></li> 

                                    <li><a href="#katzen"><img src="pics/katzen-k(7).jpg" alt="" title="Katzen" /> 
                                    <img class="large" src="pics/katzen (7).jpg" alt="" title="Katzen" /></a></li> 

                                    <li><a href="#katzen"><img src="pics/katzen-k(8).jpg" alt="" title="Katzen" /> 
                                    <img class="large" src="pics/katzen (8).jpg" alt="" title="Katzen" /></a></li> 

                                    <li><a href="#katzen"><img src="pics/katzen-k(9).jpg" alt="" title="Katzen" /> 
                                    <img class="large" src="pics/katzen (9).jpg" alt="" title="Katzen" /></a></li> 

                                    <li><a href="#katzen"><img src="pics/katzen-k(10).jpg" alt="" title="Katzen" /> 
                                    <img class="large" src="pics/katzen (10).jpg" alt="" title="Katzen" /> </a></li> 

                                    <li><a href="#katzen"><img src="pics/katzen-k(11).jpg" alt="" title="Katzen" /> 
                                    <img class="large" src="pics/katzen (11).jpg" alt="" title="Katzen" /> </a></li> 

                                    <li><a href="#katzen"><img src="pics/katzen-k(12).jpg" alt="" title="Katzen" /> 
                                    <img class="large" src="pics/katzen (12).jpg" alt="" title="Katzen" /> </a></li> 

                                    <li><a href="#katzen"><img src="pics/katzen-k(13).jpg" alt="" title="Katzen" /> 
                                    <img class="large" src="pics/katzen (13).jpg" alt="" title="Katzen" /> </a></li> 

                                    <li><a href="#katzen"><img src="pics/katzen-k(14).jpg" alt="" title="Katzen" /> 
                                    <img class="large" src="pics/katzen (14).jpg" alt="" title="Katzen" /> </a></li> 

                                    <li><a href="#katzen"><img src="pics/katzen-k(15).jpg" alt="" title="Katzen" /> 
                                    <img class="large" src="pics/katzen (15).jpg" alt="" title="Katzen" /> </a></li> 

                                    <li><a href="#katzen"><img src="pics/katzen-k(16).jpg" alt="" title="Katzen" /> 
                                    <img class="large" src="pics/katzen (16).jpg" alt="" title="Katzen" /> </a></li> 

                                    <li><a href="#katzen"><img src="pics/katzen-k(17).jpg" alt="" title="Katzen" /> 
                                    <img class="large" src="pics/katzen (17).jpg" alt="" title="Katzen" /> </a></li> 

                                    <li><a href="#katzen"><img src="pics/katzen-k(18).jpg" alt="" title="Katzen" /> 
                                    <img class="large" src="pics/katzen (18).jpg" alt="" title="Katzen" /> </a></li> 

                                    <li><a href="#katzen"><img src="pics/katzen-k(19).jpg" alt="" title="Katzen" /> 
                                    <img class="large" src="pics/katzen (19).jpg" alt="" title="Katzen" /> </a></li> 

                                    <li><a href="#katzen"><img src="pics/katzen-k(20).jpg" alt="" title="Katzen" /> 
                                    <img class="large" src="pics/katzen (20).jpg" alt="" title="Katzen" /> </a></li> 

                                    <li><a href="#katzen"><img src="pics/katzen-k(21).jpg" alt="" title="Katzen" /> 
                                    <img class="large" src="pics/katzen (21).jpg" alt="" title="Katzen" /></a></li>                                                                    
                            	</ul> 
							</li>                                                 

 
    						<li class="reiter"><a class="set" href="#andere">andere</a> 
								<ul>                                
									<li><a href="#andere"><img src="pics/tiere-k(1).jpg" alt="" title="Tiere" /> 
                                    <img class="large" src="pics/tiere (1).jpg" alt="" title="Tiere" /></a></li> 

                                    <li><a href="#andere"><img src="pics/tiere-k(2).jpg" alt="" title="Tiere" /> 
                                    <img class="hlarge" src="pics/tiere (2).jpg" alt="" title="Tiere" /></a></li> 

                                    <li><a href="#andere"><img src="pics/tiere-k(3).jpg" alt="" title="Tiere" /> 
                                    <img class="large" src="pics/tiere (3).jpg" alt="" title="Tiere" /></a></li> 

                                    <li><a href="#andere"><img src="pics/tiere-k(4).jpg" alt="" title="Tiere" /> 
                                    <img class="large" src="pics/tiere (4).jpg" alt="" title="Tiere" /></a></li> 

                                    <li><a href="#andere"><img src="pics/tiere-k(5).jpg" alt="" title="Tiere" /> 
                                    <img class="large" src="pics/tiere (5).jpg" alt="" title="Tiere" /></a></li> 

                                    <li><a href="#andere"><img src="pics/tiere-k(6).jpg" alt="" title="Tiere" /> 
                                    <img class="large" src="pics/tiere (6).jpg" alt="" title="Tiere" /></a></li> 

                                    <li><a href="#andere"><img src="pics/tiere-k(7).jpg" alt="" title="Tiere" /> 
                                    <img class="large" src="pics/tiere (7).jpg" alt="" title="Tiere" /></a></li> 

                                    <li><a href="#andere"><img src="pics/tiere-k(8).jpg" alt="" title="Tiere" /> 
                                    <img class="large" src="pics/tiere (8).jpg" alt="" title="Tiere" /></a></li> 

                                    <li><a href="#andere"><img src="pics/tiere-k(9).jpg" alt="" title="Tiere" /> 
                                    <img class="large" src="pics/tiere (9).jpg" alt="" title="Tiere" /></a></li> 

                                    <li><a href="#andere"><img src="pics/tiere-k(10).jpg" alt="" title="Tiere" /> 
                                    <img class="large" src="pics/tiere (10).jpg" alt="" title="Tiere" /></a></li> 
                            	</ul> 
							</li>                                                       
 
						</ul> 
 
						<br class="clear" />	

                    </div> 

              	</div>     <!-- content -->

Alles anzeigen

adipics.de · 14. September 2010

Stimmt... aber wenn ich das so beibehalten möchte dass das Bild sich bei Klick auf der selben Seite öffnet komm ich vermutlich nicht drum rum, oder?

...oder es ist wie öfters schon passiert so, dass die Lösung verdammt einfach wär und ich darum nicht drauf komm...

Auf jeden Fall nochmal THANKS!!!

Sarkkan · 14. September 2010

Zitat von "adipics.de"

Stimmt... aber wenn ich das so beibehalten möchte dass das Bild sich bei Klick auf der selben Seite öffnet komm ich vermutlich nicht drum rum, oder?

...oder es ist wie öfters schon passiert so, dass die Lösung verdammt einfach wär und ich darum nicht drauf komm...

Auf jeden Fall nochmal THANKS!!!

Wenn du das weiterhin so haben möchtest, gibt es wirklich nur diese Art und Weise, zu mindestens fällt mir sonst nichts anderes ein.. =/
Eine Alternative wäre JavaScript, dass erst bei Klick das große Bild geladen wird [:

Basi · 14. September 2010

Auch dafür muss das Bild erst geladen werden.

Mir fiele momentan auch nichts ein.

adipics.de · 14. September 2010

Hmm, ok, thanks.

Denke dann lass ich das erst mal so und überleg mir falls zu viele Beschwerden kommen ne andere Galerie.

Basi · 14. September 2010

Wieso nicht für jede Kategorie (Tiere, Menschen) eine eigene Seite wo nur die besagten Bilder laden?

adipics.de · 14. September 2010

Ich spiele mit dem Gedanken, ja

Basi · 14. September 2010

Ich denke du hast kaum eine andere Möglichkeit.

Bilder Ladezeiten

Jetzt mitmachen!

Teilen