画像を並列に読み込む

画像を同時に読み込むをする

qiita.js

var pathArray = ["*","*","*","*","*","*"];
var imgArray = [];
var counter = 0;
for(var i = 0 ; i < pathArray.length ; i++){
	var img = new Image();
	img.src = pathArray[i];
	imgArray.push(img);
	img.onload = function(){
		counter++;
		if(counter == pathArray.length){
			console.log("LOAD COMPLETE")
		}
	}
}

数個であればこれでもいいけど、実際に読み込みをする時に、N個並行で読み込むっていうのを作りたい。

qiita.js

function loadPararell(_pathArray,N,_func){
	var imgArray = [];
	var counter = 0;
	for(var i = 0 ; i < N ; i++){
		loadimg(i)
	}
	function loadimg(i){
		var img = new Image();
		img.src = _pathArray[i];
		imgArray.push(img);
		img.onload = function(){
			console.log("LOAD:"+img.src)
			counter++;
			if(counter == _pathArray.length){
				console.log("LOAD COMPLETE")
				_func(imgArray);
			}else if(counter < _pathArray.length - 2){
				loadimg(counter+2);
			}
		}
	}
}
var pathArray = ["assets/img/place_1.png","assets/img/place_2.png","assets/img/place_3.png","assets/img/place_4.png","assets/img/place_1.png"];;
loadPararell(pathArray,3,function(arr){
	console.log(arr);
});

できた。これでpathArrayで画像を読み込んだら、その画像のデータを配列に入れて完成で返してくれるものができた。