画像が読み込まれた後に画像の実際の幅と高さを決定する js メソッド_javascript スキル

この記事の例では、画像がロードされた後に画像の実際の幅と高さを決定する js のメソッドを説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

通常、画像の幅/高さを取得するにはjqの.width()/.height()メソッドを使用するか、画像の幅/高さを取得するにはjsの.offsetwidth/.offsetheightメソッドを使用しますが、これらのメソッドはスタイルが画像の幅と高さを設定した後、取得されるのは画像の実際の幅と高さではないため、そのような結果を取得する方法はありますか。実際の幅と高さは？答えは「はい」です。次のコードでこの問題を解決できます:

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

js コード:

//图片加载完成后获取图片实际宽高
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);
}

この実際の幅と高さを他のメソッドで呼び出したい場合は、alert(imgObj.width + "n" + imgObj.height); を変更して imgObj を返し、呼び出しメソッドを次のように変更する必要があります。

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

上記の方法は面倒すぎるので、私なりに改良した結果、略称は次のようになります。

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);
}

このようにして、画像の実際の幅と高さを他のメソッドで直接呼び出すことができます。

さらに JavaScript 関連のコンテンツに興味のある読者は、このサイトの特別トピックをチェックしてください: 「

JavaScript 検索アルゴリズム技術の概要」、「JavaScript アニメーションの特殊効果と技術の概要」 "、"JavaScript エラーとデバッグ手法の概要"、"JavaScript データ構造とアルゴリズム手法の概要"、"JavaScript トラバーサル アルゴリズムと手法の概要」と「JavaScript 数学の操作方法の概要》

この記事が JavaScript プログラミングのすべての人に役立つことを願っています。