Js判断图片加载完成操作

在JavaScript中，可以使用Image对象来检测图片是否已经全部加载完成，如果都加载成功在执行下一个操作。

代码如下：

function imgLoadAll(arr, callback) {
	let arrImg = [];
	for (let i = 0; i < arr.length; i++) {
		let img = new Image();
		img.src = arr[i];
		img.onload = function() {
			arrImg.push(this)
			if (arrImg.length == arr.length) {
				callback();
			}
		}
		img.onerror = function() {
			console.log("图片加载失败");
		}
	}
};

代码说明：

imgLoadAll函数接受一个图片URL的数组和一个回调函数作为参数。Image对象的onload事件在图片加载完成时触发，并将加载好的图片对象作为参数传递给回调函数;如果图片加载失败，则触发onerror事件(触发即代表未完全加载成功)。

使用时，只需调用imgLoadAll函数并提供图片的URL的数组和需要执行的操作即可。

链接: https://fly63.com/course/34_1644