Speicherplatz im Browser-Layout für reaktionsfähige Bilder reservieren (Reflow verhindern)

Ich habe Änderungen vorgenommen, um meine Website reaktionsfähiger zu machen, und im Allgemeinen ist dies gut gelaufen. Allerdings habe ich auf ein Problem gestoßen:Speicherplatz im Browser-Layout für reaktionsfähige Bilder reservieren (Reflow verhindern)

Bevor ich immer Höhe und Breite Attribute img Elemente verwendet, um Speicherplatz im Layout für die Bilder reservieren, während der Browser lädt sie in. Dies verhindert das Layout aus während der Browser lädt und berechnet den benötigten Platz für das Bild.

Nachdem ich meine Bilder mit Hilfe von max-width: 100% und dem Entfernen der Höhen- und Breitenattribute reaktionsschneller gemacht habe, reserviert der Browser keinen Platz mehr für das Bild (weil er nicht mehr weiß, wie groß oder breit das Bild sein wird) im voraus, da ich es nicht explizit sagen konnte)

Mein Ziel ist es, reaktionsschnelle Bilder zu haben, die bei der anfänglichen Belastung auch ihren angemessenen Platz im Seitenlayout einnehmen. Kennt jemand eine Lösung dafür?

* BEARBEITEN (LÖSUNG) - this is the best article I have found on the topic. Netter Ansatz!

Quelle

2012-11-19 Brian FitzGerald

uns Ihre HTML-Anzeigen könnten etwas Licht auf das Problem glänzen. – Shmiddty

Wir können nicht wirklich helfen, bis wir den Code sehen, der entscheidet, wie groß die Bilder sein sollen, wenn dieser Code läuft, der Seiten-HTML-Code und wie die Bilder in die Seite eingefügt werden. – jfriend00

Wie machen Sie die Website ansprechend? Laden Sie verschiedene Stylesheets basierend auf Breite und Höhe des Browsers? – davehale23

Die richtige Antwort hier ist die vertikale Reflow zu verhindern, indem die "padding-bottom Trick" verwendet wird. Damit diese Technik funktioniert, müssen Sie die Proportionen des Bildes im Voraus kennen.

Dank Anders M. Anderson für das Thema einen ausgezeichneten Artikel verfasst: http://andmag.se/2012/10/responsive-images-how-to-prevent-reflow/

Quelle

2014-12-22 15:58:59

-2

Ich würde Höhen- und Breitenattribute nicht auslassen, versuche einfach, sie auf auto zu setzen.

Quelle

2012-11-19 16:45:47 Jason

Danke für die Antwort, aber die Einstellung auf Auto löst das Problem nicht. Der Browser reserviert immer noch nicht den geeigneten Platz für das Bild im Layout. –

Hier ist ein Weg, es zu tun. Es ist nicht toll, aber funktioniert. http://jsfiddle.net/78Lvc/11/

änderte ich das Bild-Tag wie folgt aussehen:

<img src="http://fitzgeraldmedia.net/images/range1.jpg" id="img" imgWidth="467" imgHeight="700" onload="fixMyWidth()"/>

Sie werden bemerken, dass ich einige Attribute hinzugefügt haben und einen onload. Sie müssen die Attribute im Code oder von Hand hinzufügen. Der Grund dafür, dass Sie die Höhe und Breite benötigen, ist, dass Sie die Höhe des Bildes kennen müssen, um den benötigten Platz in JS zu berechnen.

Dann inline, ich habe diesen Code:

<script> 
    //get the width of the browser right now 
    var containerWidth = document.body.offsetWidth; 
    //get the attributes that we have specified for this image 
    var imgWidth = document.getElementById("img").getAttribute("imgWidth"); 
    var imgHeight = document.getElementById("img").getAttribute("imgHeight"); 

    //since the img is to be 50% of the container width 
    var widthRatio = containerWidth/imgWidth/2 ; 

    //now set the height of the image 
    document.getElementById("img").style.height = (imgHeight * widthRatio) + "px"; 

    //once the image has actually loaded, run this 
    function fixMyWidth(){ 
     //this will make it 'responsive' again 
     document.getElementById("img").style.height = ""; 
     document.getElementById("img").style.width = ""; 
    } 
</script>

Quelle

2012-11-19 22:16:16 davehale23

Speicherplatz im Browser-Layout für reaktionsfähige Bilder reservieren (Reflow verhindern)

Antwort

Verwandte Themen