読者です 読者をやめる 読者になる 読者になる

複数画像のロード完了を確認してから特定の処理を行う方法

注:javascript初心者のメモです.

javascriptでアニメーションをする時,画像のロード時間を考えなくてはいけない. 大きな画像はすぐ読み込めないし,ネットワーク越しだと更に時間がかかる.

ということでアニメーションを表示する前にアニメーション画像を予め用意しておいてその画像のロードが完了してから処理に移りたい場合がある. 重要だと思うのでライブラリや,定番処理があるかと思ったけど見つからなかった(よく分からなかった). もしこれが定番と言えるパターンがあれば教えて下さい.

自分で考えてこれが良いだろうと思った答えが以下.

var num_loaded_images = 0;
var cache_images = {};
var image_paths = []

function count_loaded_images() {
    num_loaded_images++;
}
image_paths.push("path1");
image_paths.push("path2");
...
image_paths.push("pathn");

for (var j = 0; j < image_paths.length; j++){
    var new_img = new Image();
    new_img.onload = count_loaded_images;
    new_img.src = image_paths[j];
    cache_images[i+new_img.src] = new_img;
}

function waitUntil(func, interval, callback) {
    setTimeout(function(){
        if (func()) waitUntil(func, interval, callback);
        else callback();
    }, interval);
}

// 画像を読み込み完了がsyori()を呼び出したい
waitUntil(function(){ return num_loaded_images < image_paths.length}, 50, syori);

読み込ませたい画像のパスをimage_pathsに格納. その画像の読み込み完了したらcount_loaded_imagesを呼び出し,読み込み完了画像数をnum_loaded_imagesとして保持. waitUntilで読み込み完了画像数が全画像数以下の場合繰り返し待つようにし,すべての画像が読み込まれたら入力として与えられたcallback関数を読む. このようにすることで画像が全て読み完了したことを確認した後特定の処理を行う事が出来る.