当前位置:龙哥网 > 网络技术 > javascript判断所有图片是否加载完成(如何判断js加载完成)

javascript判断所有图片是否加载完成(如何判断js加载完成)

longge5个月前 (12-17)网络技术91

由于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

免责声明
本站部分资源来源于互联网 如有侵权 请联系站长删除
龙哥网是优质的互联网科技创业资源_行业项目分享_网络知识引流变现方法的平台为广大网友提供学习互联网相关知识_内容变现的方法。#转载请注明出处!