動的に読み込まれる画像のサイズを取得する方法には、エラーが発生しやすいものがいくつかあります。エラーの主な理由は次のとおりです。
この場合、画像が 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);