loading加载百分比 以及根据加载进度移动元素

$(function(){

    var img=$("img");
    var num=0;

    img.each(function(i){
        var oImg=new Image();

        oImg.onload=function(){

            num++;

            $("h1").html(parseInt(num/$("img").length*100)+"%")
            console.log(i)

            if(num>=i){
                $(".loading").fadeOut();
            }
        }

        oImg.src=img[i].src;
    })

})


var imgs=document.querySelectorAll("img");  //获取所有图片
var num=0;
imgs.forEach(function(i,index){   //遍历图片
    var img = new Image();
    var load=document.querySelector(".loading");

    img.onload = function(){    //显示图片加载百分比
        num++;
        var hone=document.querySelector("h1");
        hone.innerHTML=parseInt(num/imgs.length*100)+"%";

        if(num>=index){     //隐藏遮罩层
            load.style.display="none"
        }
    }

    var elemt=i.getAttribute("src");
    img.src = elemt;
})

显示页面加载百分比

(function(){
    var loading = document.querySelector(".loading");
    var num = 0;var imgs=document.querySelectorAll("img");  //获取所有图片
    //loading 判断进度条位置为-10 隐藏loding
    imgs.forEach(function(i,index){   //遍历图片
        var img = new Image();
        var duck=document.querySelector(".duck");  //需要移动元素
        var proimg1=document.querySelector(".proimg1"); //需要移动元素
        img.onload = function(){ 
            num++;
　　　　　　　　//根据加载进度让元素移动
            duck.style.left = parseInt(num/imgs.length*159)+"px";
            proimg1.style.left = parseInt(num/imgs.length * 215 + -225)+"px";
            console.log(proimg1.offsetLeft)
            if(num == imgs.length){
　　　　　　　　　　//页面加载完成执行代码
            }
        }
        var elemt=i.getAttribute("src");
        img.src = elemt;
    })
})()

 

let imgs=document.querySelectorAll("img");  //获取所有图片
let num=0;
imgs.forEach( (i, index) => {
  let img = new Image();
  var load = document.getElementsByClassName('wrap')[0];
  img.addEventListener('load', () => {
    num++;
    num >= index ? (load.style.opacity = 1) : num;

    // hone.innerHTML=parseInt(num/imgs.length*100)+"%";
  })
  let elemt=i.getAttribute("src");
  img.src = elemt;
})