ホームページ  >  記事  >  ウェブフロントエンド  >  JQ_jquery で動的にロードされる画像のサイズを取得する正しい方法

JQ_jquery で動的にロードされる画像のサイズを取得する正しい方法

WBOY
WBOYオリジナル
2016-05-16 17:16:411726ブラウズ

動的に読み込まれる画像のサイズを取得する方法には、エラーが発生しやすいものがいくつかあります。エラーの主な理由は次のとおりです。
この場合、画像が Web ページからダウンロードされる前にコードが呼び出されます。マシン上で開発する場合に見つけやすいです。
jQuery のload() イベント処理のバグ。ブラウザのキャッシュから画像を取得すると、間違ったサイズが取得されます。
間違ったコードは次のとおりです。
(エラー) HTML

を追加した直後にコードを呼び出して寸法を取得します

コードをコピー コードは次のとおりです:

var html = '';
$(' #my_div').html(html);
var width = $('#my_div img').width(); // 0 を返す場合もあります

(エラー) jQuery のload() イベント処理を使用してください

コードをコピーします コードは次のとおりです:

var html = '';
var img = $(html);
html.load(function(){
// 画像がブラウザのキャッシュから読み込まれた場合は 0 を返します
var width = img.width();
}) ;
$('#my_div').html(img);

次は、JavaScript Image クラスを使用した、本当に正しいメソッドです。
正しいメソッド


var html = '';
$('#my_div').html(html);
var ni = new Image();
ni .onload = function(){
var width = ni.width;
}
ni.src = img.attr(URL);
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。