0

img の高さを見つけて、attr としてインラインで適用しようとしています。現在 img には src 属性しかありませんが、高さを動的に見つけて適用したいと考えています。

現時点の

  <img src="#">

望ましい

<img src="#" height="find this images height">

これは私がこれまでに持っているものです

$(document).ready(function() {
 $("img").load(function() {
 var width = $(this).width();
 var height = $(this).height() ;

 $(this).attr( "height", "+ height" );
 });
});

何か案は？

4

2 に答える 2

1

jQueryのドキュメントから：

画像で使用する場合の load イベントの注意事項

開発者が .load() ショートカットを使用して解決しようとする一般的な課題は、画像 (または画像のコレクション) が完全に読み込まれたときに関数を実行することです。これには注意すべき既知の警告がいくつかあります。これらは：

クロスブラウザーで一貫して確実に動作しない

画像の src が以前と同じ src に設定されている場合、WebKit で正しく起動しません。

DOM ツリーを正しくバブルアップしない ブラウザのキャッシュに既に存在する画像の起動を停止することがある

これを使用できます：

var img = $('img').get(0); // no better selector ?
if (img.height) alert('height is '+img.height);
else img.onload = function(){alert('height is '+img.height)};

よりクリーンな方法で：

function onImgLoaded(img, callback) {
   if (img.width) callback(img));
   else img.onload = function(){callback(img)};
}
onImgLoaded($('img').get(0), function(img){
    alert('height is '+img.height);
});
于 2012-11-05T19:27:50.053 に答える
0

ここでは、DOMに書き込む前に画像の高さが必要かどうかが少しわかりません。ストレートJavaScriptで幅と高さを取得する方法は次のとおりです。

var img   = document.getElementById('image_id'); 
var img_w = img.clientWidth;
var img_h = img.clientHeight;

jQueryでそれを行う方法は次のとおりです。

var img   = $("<img src='image_url' />");
var img_w = img.width;
var img_h = img.height;

幸運を...

追加された回答：

var img_h; var img_w;
var img = new Image();
img.src = img_src;
img_h   = img.height;
img_w   = img.width;
document.write( "<img src=" + img_src + " height=" + img_h + " />" );
于 2012-11-05T19:32:17.947 に答える