1

JQueryを使用して画像をHTML要素にロードしようとしましたが、画像のプロパティを使用して他のことを行いました。私がやろうとしたことは次のようなものです：

var img = new Image();
img.src = "icon.png";
var width = img.width;
var height = img.height;
$("#element").css("background-image", "url(" + img.src + ")");
//use width and height...

ほとんどの場合は機能しますが、「幅」と「高さ」が0に設定されていることがあります。検索を行ったところ、画像の読み込みは非同期ジョブであることがわかりました。そのため、プロパティを読み取ろうとすると、まだロードされていません。画像の読み込み時にコールバック関数を指定するために使用できるonLoadイベントがあることがわかりました。

そんなことをするのに一番いい方法なのかしら。たとえば、画像に関する情報が必要なだけで、それを表示する必要がなく、その情報をクライアント側で管理したい場合を考えてみましょう。画像を読み込む必要がありますか？そのような情報を取得する他の方法はありますか？

4

1 に答える 1

6

画像が読み込まれるのを待つ必要があります。

var img = new Image();
img.onload = function() {
  var width = img.width;
  var height = img.height;
  $("#element").css("background-image", "url(" + img.src + ")");
};
img.src = "icon.png";

「src」属性に割り当てられたURLから画像をフェッチする必要があるため、操作は非同期で処理されます。つまり、「src」属性の割り当てに続くステートメントで画像が使用できるという保証はありません。

画像がキャッシュされている可能性があるため、機能する場合があります。

于 2012-11-23T14:13:50.787 に答える