Seite 1 von 1

Mit css Bilder vorladen

Verfasst: Mo 20. Okt 2014, 01:49
von camouflage1984
Die Funktion ist einfach erklärt...

Durch display:none; für den div loader werden die Bilder nicht gezeigt aber im Hintergrund geladen, sobald diese fertig geladen sind, werden die gleichen Bilder danach alle gleichzeitig angezeigt.

Code: Alles auswählen

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Bilder Vorladen</title>

  <style type="text/css">
  img{
  width:400px; 
  height:auto !important;
  }
  #loader{
 
 display: none;
 
}  
  </style>
</head>
</body>
<div id="loader">
<img src="bilder/IMAG0300.jpg">
<img src="bilder/IMAG0301.jpg">
<img src="bilder/IMAG0302.jpg">
<img src="bilder/IMAG0303.jpg">
</div>
<img src="bilder/IMAG0300.jpg">
<img src="bilder/IMAG0301.jpg">
<img src="bilder/IMAG0302.jpg">
<img src="bilder/IMAG0303.jpg">
</body>
</html>

Re: Mit css Bilder vorladen

Verfasst: Do 23. Okt 2014, 00:00
von mich78
Soweit ich weiß verhalten sich nicht alle Browser gleich wenn es um Bildern geht die per display: none ausgeblendet werden. Einigen Browsern laden die Bilder vor, andere anscheinend nicht. http://forum.de.selfhtml.org/archiv/2010/8/t199671/

Es gibt eine ganz ähnliche Lösung bei der die Bilder garantiert geladen werden.
Früher hat man die Bilder auf der Startseite plaziert und auf 1x1px verkleinert:

Code: Alles auswählen

width= 1px;
height= 1px;
Wichtig war hierbei aber das die Bilder erst am Ende der Seite kommen.
Erklärung:
Der Browser lädt ja ein Bild nach dem anderen, und zwar in der Reihenfolge in der sie im Quelltext vorkommen.
Wenn die "unsichtbar gemachten" Bilder erst geladen werden, tauchen die folgenden Inhalte der Seite (z.B. ein Startbild) erst auf nachdem die anderen Bilder geladen sind --> Die Seite baut sich langsam auf.

Kommen die "unsichtbar gemachten Bilder" erst am Schluss, merkt das der Seitenbesucher nicht :).

P.S. Alternativ kann man die Bilder natürlich auch absolut positionieren und aus dem Viewpoint herausschieben (wie beim image replacement) ;)