js-Methode zum Bestimmen der tatsächlichen Breite und Höhe des Bildes, nachdem das Bild geladen wurde_Javascript-Kenntnisse

Das Beispiel in diesem Artikel beschreibt die Methode von js, um die tatsächliche Breite und Höhe des Bildes nach dem Laden des Bildes zu bestimmen. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Normalerweise verwenden wir die .width()/.height()-Methode von jq, um die Breite/Höhe des Bildes zu ermitteln, oder die .offsetwidth/.offsetheight-Methode von js, um die Breite/Höhe des Bildes zu ermitteln, aber diese Methoden werden nicht verwendet, wenn wir übergeben Nachdem der Stil die Breite und Höhe des Bildes festgelegt hat, ist das, was wir erhalten, nicht die tatsächliche Breite und Höhe des Bildes. Dies ist offensichtlich nicht das Ergebnis, das wir manchmal wünschen. Gibt es also eine Möglichkeit, diese zu erhalten? tatsächliche Breite und Höhe? Die Antwort ist ja. Der folgende Code kann dieses Problem lösen:

<img src="01.jpg" id="test" width="250px">

JS-Code:

//图片加载完成后获取图片实际宽高
var _test = document.getElementById("test");
test.onload = function(){
  imgSize.call(_test);
}
function imgSize(){
  var imgObj = new Image();
  imgObj.src = this.src;
  alert(imgObj.width + "\n" + imgObj.height);
}

Wenn Sie diese tatsächliche Breite und Höhe in anderen Methoden aufrufen möchten, sollten Sie „alert(imgObj.width + „n“ + imgObj.height)“ ändern, um imgObj zurückzugeben, und dann die aufrufende Methode:

window.onload = function(){
    function a(){
      var real= imgSize.call(_test);
      var realwidth = real.width;
      alert(realwidth);
    }
    a();
}

Die obige Methode ist zu umständlich. Nach meiner eigenen Verfeinerung lautet die Abkürzung wie folgt:

window.onload = function(){
    var _test = document.getElementById("test"); //若是jq，则直接将此代码换成 var _test = $("#test"); 即可。
    var imgObj = new Image();
    imgObj.src = _test.src; //若是jq，则直接将此代码换成 imgObj.src = _test.attr("src"); 即可。
    alert(imgObj.width);
}

Auf diese Weise können die tatsächliche Breite und Höhe des Bildes direkt in anderen Methoden aufgerufen werden.

Leser, die an mehr JavaScript-bezogenen Inhalten interessiert sind, können sich die Spezialthemen auf dieser Website ansehen: „Zusammenfassung der Techniken des JavaScript-Suchalgorithmus“, „Zusammenfassung der Spezialeffekte und Techniken der JavaScript-Animation.“ ", "Zusammenfassung von JavaScript-Fehlern und Debugging-Techniken", "Zusammenfassung von JavaScript-Datenstrukturen und Algorithmustechniken", "Zusammenfassung von JavaScript-Traversal-Algorithmen und -Techniken“ und „JavaScript-Mathematik-Zusammenfassung der Operationsverwendung》

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die sich mit der JavaScript-Programmierung befassen.