JavaScript-Codebeispiel, um die tatsächliche Größe der picture_javascript-Fähigkeiten zu ermitteln

Bildgrößen auf Webseiten scheinen alle gleich zu sein. In den Artikelseiten, die wir am häufigsten mit mehreren Bildern sehen, entspricht die Größe der Bilder normalerweise der Breite der Seite. Auf diese Weise sieht die Seite wie ein gerader Zylinder aus fühle mich sehr eintönig. Der Grund für diese Situation liegt meiner Meinung nach größtenteils in den Einschränkungen alter Browser. Mit der Beliebtheit moderner Browser (Firefox/Google/IE11) unterliegen Browser jedoch immer weniger Einschränkungen beim Seitendesign, und die Fantasie von Webprogrammierern kann stark genutzt werden.

Zum Beispiel als Wissenswertes: Wissen Sie, woher das [x] in jedem Fenster kommt? In diesem Artikel überschreiten viele Bilder die Grenze der Textbreite, was den Menschen ein Gefühl der Unebenheit vermittelt. Gleichzeitig vermittelt die Anzeige großer Bilder in ihrer tatsächlichen Größe ein schockierenderes Gefühl.

Aber technisch gesehen können wir die Bilder leicht durch die maximale Breite des Textes begrenzen, sodass sie alle die gleiche Breite beibehalten. Anstatt auf die Breite des Textes zu drücken, muss jedes Bild seine eigene Größe haben. Bei der serverseitigen Bearbeitung können wir die Originalgröße des Bildes angeben. Eine flexiblere Möglichkeit besteht darin, die Originalgröße des Bildes dynamisch zu erhalten, indem ein Teil von js auf der Seite platziert wird, und die Anzeigegröße des Bildes dynamisch zu ändern. Dies ist nicht nur mit der alten Methode zur Maximierung der Textbreite kompatibel, sondern ermöglicht auch, dass Bilder bei Bedarf in ihrer Originalgröße angezeigt werden.

Wie erhalte ich mithilfe von JavaScript die Originalgröße des Bildes auf der Browserseite?

var img = $(“#img_id“); // Mein img elem abrufen
var pic_real_width, pic_real_height;
$(“”) // Kopie des Bildes im Speicher erstellen, um CSS-Probleme zu vermeiden
.attr(“src”, $(img).attr(“src”))
.load(function() {
pic_real_width = this.width; // Hinweis: $(this).width() wird nicht
pic_real_height = this.height; // Arbeit für In-Memory-Bilder.
});

Webkit-Browser (Google Chrome usw.) können die Höhen- und Breitenwerte erst nach dem Ladeereignis des Bildes abrufen. Daher können Sie die Timeout-Funktion nicht verwenden, um das Warten zu verzögern. Am besten verwenden Sie das Onload-Ereignis des Bildes.

Um den Einfluss von CSS auf die Bildgröße zu vermeiden, kopiert der obige Code das Bild zur Berechnung in den Speicher.

Wenn es sich bei Ihrer Seite um eine altmodische Seite handelt, können Sie diesen Code bei Bedarf unten auf der Seite einbetten. Es ist nicht erforderlich, dass Sie die Originalseite ändern.