Wie erhalte ich zuverlässig Bildabmessungen in WebKit-Browsern?

Bestimmen der Bildabmessungen in Webkit-Browsern

Bei der Entwicklung von JavaScript-Plugins ist es entscheidend, die tatsächliche Breite und Höhe eines Bildes zu ermitteln. Während herkömmliche Methoden in Firefox, IE und Opera funktionieren, schlagen sie in Safari und Chrome fehl, wo die zurückgegebenen Werte Null sind.

Das einzigartige Verhalten beim Laden von Bildern von WebKit

Im Gegensatz dazu Bei anderen Browsern legt Webkit die Höhen- und Breiteneigenschaften eines Bildes erst fest, nachdem es geladen wurde. Dieses Verhalten erfordert einen anderen Ansatz zum Abrufen der wahren Bildabmessungen.

利用图片加载事件

Die empfohlene Lösung umfasst die Verwendung des Onload-Ereignisses eines Bildes. Unten finden Sie einen modifizierten Codeausschnitt, der das Problem behebt:

var img = $("img")[0]; // Get the image element
var pic_real_width, pic_real_height;
$("<img/>") // Create an in-memory copy to avoid CSS issues
    .attr("src", $(img).attr("src"))
    .load(function() {
        pic_real_width = this.width;
        pic_real_height = this.height;
    });

CSS-Effekte vermeiden

Um zu verhindern, dass CSS-Effekte die Abmessungen beeinflussen, erstellt der Code eine In- Speicherkopie des Bildes. Diese Technik stellt sicher, dass die abgerufenen Werte genau die tatsächliche Bildgröße widerspiegeln.

Alternativer Ansatz: HTML5-Attribute

HTML5 stellt die Attribute naturalHeight und naturalWidth bereit, die ebenfalls verwendet werden können um die tatsächlichen Bildabmessungen abzurufen. Die Unterstützung dieser Attribute variiert jedoch je nach Browser.

Das obige ist der detaillierte Inhalt vonWie erhalte ich zuverlässig Bildabmessungen in WebKit-Browsern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!