Immer Dimensionen von background-image

Ich versuche, die Breite und Höhe des Elements background-image. Wenn Sie darauf klicken, wird es zeigen, sollte es in das element ("200 300" in diesem Fall).

HTML:

<div id='test'></div>

CSS:

#test {
  width: 100px; height: 100px;
  background-image: url(http://placehold.it/200x300);
}

JavaScript:

$('#test').on('click', function () {
  $(this).text(getDimensions($(this)));
});

var getDimensions = function(item) {
  var img = new Image(); //Create new image
  img.src = item.css('background-image').replace(/url\(|\)$/ig, ''); //Source = clicked element background-image
  return img.width + ' ' + img.height; //Return dimensions
};

Hier ist die Fiddle. Das problem ist, es funktioniert nur in Chrome, alle anderen großen Browser return "0 0". Ich habe keine Ahnung, was der Grund ist. Nicht, dass die Grafik vollständig geladen?

InformationsquelleAutor Robert Kirsz | 2013-06-21
  1. 3

    Das Problem ist, dass einige Browser fügen Sie Anführungszeichen, um die CSS -, und es wurde versucht zu laden (in der Geige der Fall ist) "http://fiddle.jshell.net/_display/%22http://placehold.it/200x300%22". Ich habe aktualisiert .replace() zu suchen, " wie gut, und eine Geige ist bei http://jsfiddle.net/4uMEq/

    $('#test').on('click', function () {
    $(this).text(getDimensions($(this)));
});

var getDimensions = function (item) {
    var img = new Image();
    img.src = item.css('background-image').replace(/url\(|\)$|"/ig, '');
    return img.width + ' ' + img.height;
};
    • Danke, ich hätte nie gedacht, dass das problem war.
    • Wenn Sie Zweifel haben, öffnen Sie den web-Inspektor und in der console.log() 😉 das Zünglein an mir dran war, dass die FF wurde nicht geladen werden kann ein Bild mit diesem seltsamen URL.
    InformationsquelleAutor SpenserJ
  2. 0

    Ich denke, Sie müssen warten, bis onload Ereignis auf das Bild.

    InformationsquelleAutor STO
Schreibe einen Kommentar