Ich erstelle ein jQuery-Plugin.
Wie erhalte ich mit Javascript in Safari die tatsächliche Bildbreite und -höhe?
Folgendes funktioniert mit Firefox 3, IE7 und Opera 9:
var pic = $("img")
// need to remove these in of case img-element has set width and height
pic.removeAttr("width");
pic.removeAttr("height");
var pic_real_width = pic.width();
var pic_real_height = pic.height();
In Webkit-Browsern wie Safari und Google Chrome sind die Werte jedoch 0.
javascript
jquery
safari
google-chrome
webkit
Frank Bannister
quelle
quelle
Antworten:
Webkit-Browser legen die Eigenschaft height und width fest, nachdem das Bild geladen wurde. Anstatt Zeitüberschreitungen zu verwenden, würde ich empfehlen, das Onload-Ereignis eines Bildes zu verwenden. Hier ist ein kurzes Beispiel:
Um die Auswirkungen von CSS auf die Bildabmessungen zu vermeiden, erstellt der obige Code eine Kopie des Bilds im Speicher. Dies ist eine sehr clevere Lösung, die von FDisk vorgeschlagen wurde .
Sie können auch die Attribute
naturalHeight
undnaturalWidth
HTML5 verwenden.quelle
width
undheight
Sie sollten wahrscheinlich auch entfernenmin-width
,min-height
,max-width
undmax-height
wie sie auch die Bildabmessungen beeinflussen könnten.window.onload
, wird möglicherweise eine Höhe / Breite von 0 zurückgegeben. Auf jeden Fall habe ich die Idee von FDisk in die obige Lösung integriert.load()
es asynchron ausgeführt wird, wenn Sie darauf zugreifen möchtenwidth
undheight
- sie möglicherweise noch nicht festgelegt wurden. Mach stattdessen „die Magie“ anload()
sich!Verwenden Sie die Attribute
naturalHeight
undnaturalWidth
aus HTML5 .Beispielsweise:
Funktioniert in IE9 +, Chrome, Firefox, Safari und Opera ( Statistiken ).
quelle
Sie müssen den Stil nicht aus den Attributen für Bild oder Bildabmessungen entfernen. Erstellen Sie einfach ein Element mit Javascript und erhalten Sie die erstellte Objektbreite.
quelle
Image
Objekt zu erstellen und dann dessenwidth
Eigentum zu betrachten. Dies ist ein einfacher, eleganter Ansatz. FDisk, du hast meine Stimme. :)window.onload
, wird möglicherweise eine Breite von 0 zurückgegeben.Das Hauptproblem besteht darin, dass WebKit-Browser (Safari und Chrome) JavaScript- und CSS-Informationen parallel laden. Daher kann JavaScript ausgeführt werden, bevor die Styling-Effekte von CSS berechnet wurden, und die falsche Antwort zurückgeben. In jQuery habe ich festgestellt, dass die Lösung darin besteht, zu warten, bis document.readyState == 'complete', .eg,
Was Breite und Höhe angeht ... Je nachdem, was Sie tun, möchten Sie möglicherweise OffsetWidth und OffsetHeight, einschließlich Rahmen und Polsterung.
quelle
$(window).load(function(){ ... });
half in meinem FallIn der akzeptierten Antwort wird viel über ein Problem diskutiert, bei dem das
onload
Ereignis nicht ausgelöst wird, wenn ein Bild aus dem WebKit-Cache geladen wird.In meinem Fall werden
onload
zwischengespeicherte Bilder ausgelöst, aber Höhe und Breite sind immer noch 0. Eine einfachesetTimeout
Lösung hat das Problem für mich behoben:Ich kann nicht sagen, warum das
onload
Ereignis ausgelöst wird, selbst wenn das Bild aus dem Cache geladen wird (Verbesserung von jQuery 1.4 / 1.5?) - aber wenn dieses Problem weiterhin auftritt, wird möglicherweise eine Kombination aus meiner Antwort und dervar src = img.src; img.src = ""; img.src = src;
Technik angezeigt Arbeit.(Beachten Sie, dass ich mir für meine Zwecke keine Gedanken über vordefinierte Dimensionen mache, weder in den Attributen des Bildes noch in den CSS-Stilen. Möglicherweise möchten Sie diese jedoch gemäß der Antwort von Xavi entfernen. Oder klonen Sie das Bild.)
quelle
Dies funktioniert für mich (Safari 3.2), indem ich aus dem
window.onload
Event heraus feuere:quelle
Sie können das Bild programmgesteuert abrufen und die Abmessungen mit Javascript überprüfen, ohne sich mit dem DOM herumschlagen zu müssen.
quelle
Was ist mit
image.naturalHeight
undimage.naturalWidth
Eigenschaften?Scheint gut zu funktionieren, einige Versionen in Chrome, Safari und Firefox, aber überhaupt nicht in IE8 oder sogar IE9.
quelle
Wie wir die richtigen realen Dimensionen ohne ein blinkendes reales Bild erhalten:
Es funktioniert mit <img class = "toreaddimensions" ...
quelle
Jquery hat zwei Eigenschaften namens naturalWidth und naturalHeight, die Sie auf diese Weise verwenden können.
Wobei my-img ein Klassenname ist, mit dem mein Bild ausgewählt wird.
quelle
naturalWidth
(und Höhe) sind Eigenschaften des Bildelementobjekts. developer.mozilla.org/en/docs/Web/API/HTMLImageElementWie bereits erwähnt, funktioniert die Xavi-Antwort nicht, wenn sich Bilder im Cache befinden. Das Problem reagiert darauf, dass das Webkit das Ladeereignis für zwischengespeicherte Bilder nicht auslöst. Wenn also die Breiten- / Höhenattrs im img-Tag nicht explizit festgelegt sind, können Sie die Bilder nur dann zuverlässig abrufen, wenn das
window.load
Ereignis ausgelöst wird.Das
window.load
Ereignis wird immer ausgelöst , so dass Sie sicher und ohne Trick auf die Breite / Höhe von und danach zugreifen können.Wenn Sie die Größe dynamisch geladener Bilder ermitteln müssen, die möglicherweise zwischengespeichert werden (zuvor geladen), können Sie die Xavi-Methode plus eine Abfragezeichenfolge verwenden, um eine Cache-Aktualisierung auszulösen. Der Nachteil ist, dass es eine weitere Anforderung an den Server für ein Bild gibt, das bereits zwischengespeichert ist und bereits verfügbar sein sollte. Dummes Webkit.
ps: Wenn Sie bereits einen QueryString
img.src
haben, müssen Sie ihn analysieren und den zusätzlichen Parameter hinzufügen, um den Cache zu leeren.quelle
Wie Luke Smith sagt, ist das Laden von Bildern ein Chaos . Es ist nicht in allen Browsern zuverlässig. Diese Tatsache hat mir große Schmerzen bereitet. Ein zwischengespeichertes Bild löst das Ereignis in einigen Browsern überhaupt nicht aus. Daher sind diejenigen falsch, die sagten, dass das Laden von Bildern besser ist als setTimeout.
Luke Smiths Lösung ist hier.
Und es gibt eine interessante Diskussion darüber, wie dieses Durcheinander in jQuery 1.4 behandelt werden könnte.
Ich habe festgestellt, dass es ziemlich zuverlässig ist, die Breite auf 0 zu setzen und dann zu warten, bis die Eigenschaft "complete" wahr wird und die Eigenschaft width größer als Null ist. Sie sollten auch auf Fehler achten.
quelle
Aus Chris 'Kommentar: http://api.jquery.com/load-event/
quelle
Meine Situation ist wahrscheinlich etwas anders. Ich ändere dynamisch den Quellcode eines Bildes über Javascript und muss sicherstellen, dass das neue Bild proportional zu einem festen Container (in einer Fotogalerie) passt. Ich habe zunächst nur die Attribute width und height des Bildes nach dem Laden (über das Ladeereignis des Bildes) entfernt und diese nach Berechnung der bevorzugten Abmessungen zurückgesetzt. Dies funktioniert jedoch nicht in Safari und möglicherweise im Internet Explorer (ich habe es im Internet Explorer nicht gründlich getestet, aber das Bild wird nicht einmal angezeigt, also ...).
Auf jeden Fall behält Safari die Abmessungen des vorherigen Bildes bei, sodass die Abmessungen immer ein Bild dahinter liegen. Ich gehe davon aus, dass dies etwas mit dem Cache zu tun hat. Die einfachste Lösung besteht also darin, das Bild einfach zu klonen und dem DOM hinzuzufügen (es ist wichtig, dass es dem DOM hinzugefügt wird, um das With und die Höhe zu erhalten). Geben Sie dem Bild den Sichtbarkeitswert "Versteckt" (verwenden Sie "Anzeige keine", da dies nicht funktioniert). Nachdem Sie die Dimensionen erhalten haben, entfernen Sie den Klon.
Hier ist mein Code mit jQuery:
Diese Lösung funktioniert auf jeden Fall.
quelle
Es gibt jetzt ein jQuery-Plugin, das
event.special.load
Fälle behandelt, in denen das Ladeereignis eines zwischengespeicherten Images nicht ausgelöst wird: http://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.jsquelle
Vor kurzem musste ich Breite und Höhe finden, um die Standardgröße von .dialog für das Diagramm festzulegen. Die von mir verwendete Lösung war:
Für mich funktioniert das in FF3, Opera 10, IE 8,7,6
PS Möglicherweise finden Sie weitere Lösungen in einigen Plugins wie LightBox oder ColorBox
quelle
Um
XavisAntwort zu ergänzen, bietetPaul Irishs GithubDavid Desandros Gitgub eine Funktion namens imagesLoaded () , die nach denselben Prinzipien arbeitet und das Problem umgeht, dass die zwischengespeicherten Bilder einiger Browser das Ereignis .load () nicht auslösen (mit cleverem original_src ->) data_uri -> original_src umschaltung).Es ist weit verbreitet und wird regelmäßig aktualisiert, was dazu beiträgt, dass es die robusteste Lösung für das Problem ist, IMO.
quelle
imagesLoaded
Funktion finden Sie hier: github.com/desandro/imagesloadedDies funktioniert sowohl für zwischengespeicherte als auch für dynamisch geladene Bilder.
So verwenden Sie dieses Skript:
Demo: http://jsfiddle.net/9543z/2/
quelle
Ich habe einige Umgehungsfunktionen mit dem JQuery-Plugin imagesLoaded ausgeführt: https://github.com/desandro/imagesloaded
Sie können dies verwenden, indem Sie URL, Funktion und deren Kontext übergeben. Die Funktion wird ausgeführt, nachdem das Bild geladen wurde und das erstellte Bild mit seiner Breite und Höhe zurückgegeben wurde.
quelle
Wenn das Bild bereits verwendet wird, sollten Sie Folgendes tun:
Setzen Sie die Bildsimulationen auf initial
image.css ('width', 'initial'); image.css ('height', 'initial');
Abmessungen erhalten
var originalWidth = $ (this) .width (); var originalHeight = $ (this) .height ();
quelle
Sie können die Eigenschaften naturalWidth und naturalHeight des HTML-Bildelements verwenden. (Hier gibt es mehr Infos ).
Sie würden es so verwenden:
Es scheint, dass dies in allen Browsern funktioniert, außer im IE ab Version 8.
quelle
Ich habe die Antwort von Dio überprüft und es funktioniert großartig für mich.
$('#image').fadeIn(10,function () {var tmpW = $(this).width(); var tmpH = $(this).height(); });
Stellen Sie sicher, dass Sie auch alle Ihre Funktionen aufrufen. dieses Handle mit der Bildgröße in der Recaller-Funktion von fadeIn ().
Danke dafür.
quelle
Ich benutze einen anderen Ansatz, rufe einfach Ajax an den Server, um die Bildgröße zu ermitteln, wenn das Bildobjekt verwendet wird.
und natürlich serverseitigen Code:
quelle
Dies funktioniert browserübergreifend
Holen Sie sich die Dimensionen mit
Prost!
quelle
Ein weiterer Vorschlag ist die Verwendung des imagesLoaded-Plugins .
quelle
// Dieser Code hilft, Bilder mit einer Abmessung von 200 * 274 anzuzeigen
quelle
Hier ist eine browserübergreifende Lösung, die ein Ereignis auslöst, wenn Ihre ausgewählten Bilder geladen werden: http://desandro.github.io/imagesloaded/ Sie können die Höhe und Breite in der Funktion imagesLoaded () nachschlagen.
quelle
Stolperte über diesen Thread und versuchte eine Antwort auf meine eigene Frage zu finden. Ich habe versucht, die Breite / Höhe eines Bildes in einer Funktion NACH dem Lader zu ermitteln, und habe immer wieder 0 gefunden. Ich habe jedoch das Gefühl, dass dies das ist, wonach Sie suchen, da es für mich funktioniert:
quelle
Schauen Sie sich dieses Repository in Github an!
Tolles Beispiel, um die Breite und Höhe mit Javascript zu überprüfen
https://github.com/AzizAK/ImageRealSize
--- Bearbeitet wird von einigen Kommentaren angefordert ..
Javascript-Code:
und HTML-Code:
quelle
Für Funktionen, bei denen Sie die ursprüngliche Platzierung oder das Bild nicht ändern möchten.
quelle