网页加载进度(百分比)

星空的小太阳 发布于:2022-01-07 09:46:16

注:一旦有无法找到的图片,将无法达到100%

参数id:元素节点的id

原址:https://www.cnblogs.com/duanzhenzhen/p/10155684.html

function pageLoadingImg(id){
	let sum = 0;
	let imgArr = document.querySelectorAll("img");
	let imglengths = imgArr.length;
	for(let i = 0; i < imglengths; i++){
		let proImage = new Image();
		proImage.onload = function() {
			proImage.onload = null;
			sum++;
			let progress = parseInt(sum / imglengths * 100);
			document.getElementById(id).innerText = progress + "%";
			if(sum >= imglengths){
				console.log('页面加载完成')
			}
		}
		proImage.src = imgArr[i].src;
	}
	
}


觉得有用请点个赞吧!
1 433