javascript判断所有图片是否加载完成

由于load()事件在1.8版本中被废弃,因此前面的jquery判断多张图片是否加载完成代码(兼容IE)代码只能在jQuery低版本下使用,下面的判断所有图片是否加载的函数代码基于原生javascript代码,兼容大部分浏览器。

函数代码:

function loadImg(arr) {
	var newimages = [];
	var arr = (typeof arr != 'object') ? [arr] : arr;
	for (var i = 0; i < arr.length; i++) {
		newimages[i] = new Promise(function(resolve, reject){
			var image = new Image();
			image.addEventListener('load', function listener() {
				resolve(image);
				this.removeEventListener('load', listener);
			});
			image.src = arr[i];
			image.addEventListener('error', reject);
		});
	}
	return newimages;
}

调用函数:

$(function () {
	var listpic = new Array();
	$('img').each(function(){
		listpic.push($(this).attr('src'));
	});
	Promise.all(loadImg(listpic)).then(function(){
		console.log('图片全部加载完成');
	});
});

代码来自:https://segmentfault.com/q/1010000014701009/a-1020000014702682