Wie wird ein Bildplatzhalter verwendet, während Bilder in einem ansprechenden Raster geladen werden?

Question

ein ansprechendes Fluid grid und Bilder verwenden 800px x 500px

Problem: Wenn Bilder zu laden, die Fußzeile, wie es oben und nach unten gedrückt wird, während die Bilder im Laden sind

Setup:. Unter Verwendung eines div für die Bilder und div für die Fußzeile.

Ziel: Die Fußzeile soll immer in der richtigen Position bleiben und nicht versuchen, sie an einen absoluten Punkt zu bringen, sondern nur, um den Abstand der Bilder zu berücksichtigen.

Ideen: Vielleicht ein transparentes PNG bei 800x500 verwenden, so dass es zuerst vor den Bildern lädt.

Bedenken: ein div Platzhalter bei 800x500 Erstellen arbeiten möglicherweise nicht wie diese Bilder in einem Fluid Grid reagieren, so werden sie nie in dieser Größe tatsächlich, es sei denn der Betrachter einen großen Bildschirm hat ..

Endergebnis wenn Bilder geladen:

Aktuelle Ausgabe:

Tor für Bilder zu laden:

Answer 1

Wenn ich das Seitenverhältnis für etwas wissen, wird die gleiche, egal, was die Breite der Elemente/Bildschirm bleiben, ich tue etwas wie folgt aus:

.image-holder { 
    display: inline-block; 
    width: 33.333%; 
    position: relative; 
} 
.image-holder:before { 
    content:""; 
    display: block; 
    padding-top: 62.5%; 
} 
.image-holder img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

Hier ist eine vollständige Demo: http://jsfiddle.net/serv0m8o/1/

ich jedes Bild in einem div mit einer Klasse von image-holder wickeln (die Sie gestylt das 3 pro Zeile Muster zu geben, die Sie veranschaulicht) und stellen Sie sicher, es ist position: relative;

Ich style dann das :before Pseudo-Element von diesem div, um die richtige Höhe des Seitenverhältnisses zu sein, das benötigt wird. Padding in CSS ist eine intrinsische Eigenschaft, dh es basiert auf der Breite des Elements, sodass Sie einen Prozentsatz zuweisen können, der das Verhältnis widerspiegelt. Sie 800x500 Bilder angegeben, so (500/800*100) = 62.5% wie mein padding-top

Dann können Sie absolut Ihr Bild positionieren die volle Breite und Höhe des Behälters zu füllen (das ist, warum wir es gesetzt position: relative; zu sein)

Auf diese Mittel dass das div Element die Größe ist, die das Bild sein wird, ob das Bild in es geladen wird oder nicht (das Bild selbst hat keinen Einfluss auf die Containergröße, da es absolut positioniert ist)