外部の複数画像を読み込みたい

質問

外部にある連番の画像を1個1個取得してHTML上に生成したいと思ってます。

画像の数は決まっていないのでfor文を使用します。

onloadを使用しないと、
画像の高さなどが取得できないのでやもなく使用していますが、

でもonloadを使用すると一度しか実行できないので1個目の画像しか高さが取得できません。

なにかよい方法があればご教授頂きたいです。

▼下記ソース

//onload使用した場合
for (var i = 0; i < 10; i++) {
img=new Image();
img.src = 'hoge'+[i]+'.jpg';
img.onload = function() {
console.log(img.height);
}
}

↑の結果 = 1個目の画像のみ高さが取れます

//onload使用しない場合
for (var i = 0; i < 10; i++) {
img=new Image();
img.src = 'hoge'+[i]+'.jpg';
console.log(img.height);
}

↑の結果 = 初回は取得できず。リロードすると高さが取得できます。

回答No.2

LonelyWolf · ベストアンサー

画像が読み込まれる前に処理が進んでしまうので、var back = ... としている所で
処理するのは無理だと思います。

近いことをやるとすると次の2つのやり方があると思います。

■ すべての画像を読み込んでから、後で for で処理する
var imgs = [];

var length = 10; // 読み込む画像の数
var loadedCount = 0; // 読み込まれた画像の数

for (var i = 0; i < length; i++) {
　　imgs[i] = new Image();
　　imgs[i].src = "hoge" + i + ".jpg";
　　imgs[i].onload = function () {
　　　　loadedCount++;

　　　　// 全部が読み込まれたら呼び出す
　　　　if (length <= loadedCount) {
　　　　　　onLoad(imgs);
　　　　}
　　};
}

function onLoad(imgs) {
　　// 呼び出されるときには、画像がすべて読み込まれている
　　for (var i = 0; i < imgs.length; i++) {
　　　　console.log(imgs[i].height);
　　}
}

上記のように読み込まれた画像を数えて、全部読み込まれたら onLoad を呼び出すという
やりかたで、全部が読み込まれた状態で処理をすることができます。

見やすさのために onLoad という関数を定義していますが、onLoad(imgs); のところに直接
for (var j = 0; j < length; j++) {
　　console.log(imgs[j].height);
}

としても良いです

■ hoge0.jpg の処理が終わったら hoge1.jpg の処理…と進めていきたい場合
最初に一気に読み込むのではなく順次処理を進めていきたい場合は、

function loadImage(i) {
　　var img = new Image();
　　img.src = "hoge" + i + ".png";
　　img.onload = function () {
　　　　// onload の後に書こうとしていた部分(★)
　　　　var back = img.height;
　　　　console.log(back);

　　　　// 次の画像を読み込む
　　　　if (i + 1 <= 10) {
　　　　　　loadImage(i + 1);
　　　　}
　　};
}

loadImage(0);

と再帰的にやることで順次実行していくことができます。

お礼

回答ありがとうございます。
なるほど。そういう方法もあるんですね。
こちらを参考にもうちょっと汎用的に使えるかどうか改良するなり頑張ってみます。

この度は大変お世話になりました。
丁寧・適切なご回答すぐに頂き、本当に感謝しております。

回答No.1

LonelyWolf

参考URLの「よくある間違い: ループ内でクロージャを作成する」の項目が参考になると思います。

そこにある例のように、

function makeLoadCallback(img) {
　　return function () {
　　　　console.log(img.height);
　　};
}

を定義しておいて、

img.onload = makeLoadCallback(img);

とすると想定通り動くと思います。

横着をしたければ、

img.onload = function (img) {
　　return function () {
　　　　console.log(img.height);
　　};
}(img);

でも良いです。

参考URL：

https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Closures

補足

回答ありがとうございます。
上記の方法で試したらうまく行きました。

ちなみに、for文内に値を戻したい場合はどうすればよいのでしょうか。

例↓
for (var i = 0; i < 4; i++) {
img=new Image();
img.src = 'hoge'+[i]+'.jpg';
img.onload = makeLoadCallback(img);

//↓ここで呼び出したい
var back = img.height;
console.log(back);
}

function makeLoadCallback(img){
return function() {
console.log(img.height);
}
}