js获取html加载进度,JS实现文件加载进度

目前在移动页面上，有很多情况需要加载大量的资源。但是移动端的访问速度和pc还是有很大的差距，有些时候需要一些取巧的方式来提升用户体验，而实时显示加载进度就是其中一种。

最终效果

代码如下

Document

*{margin: 0;padding: 0;}

div{width:200px;height: 30px;border:1px solid #ccc;margin: 50px auto;}

span{display:inline-block;height: 30px;background: #abcdef;}

var img_arr = ['1.jpg','2.jpg','3.png'];

var nums = img_arr.length;

var start = 0;

for(var i in img_arr){

var img = document.createElement('img');

img.src = img_arr[i];

(function(j){

img.onload = function(){

start++;

if(start == nums){

console.log('全部加载完成');

}

document.getElementById('loading').style.width