Mit css Bilder vorladen

Antworten
camouflage1984
Beiträge: 253
Registriert: Di 19. Aug 2014, 14:34

Mit css Bilder vorladen

Beitrag von camouflage1984 » Mo 20. Okt 2014, 01:49

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>
Lachen ist gesund :-)
camouflage1984.de Webseite / wzp-galipix Das Galerie Script / wzp-cms Das einfache CMS / wzp-webdesign

mich78
Beiträge: 46
Registriert: Sa 11. Okt 2014, 22:08

Re: Mit css Bilder vorladen

Beitrag von mich78 » Do 23. Okt 2014, 00:00

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) ;)

Antworten