로더가 사라지지만 이미지가 완전히 렌더링되지 않습니다.

Question

내 페이지에 정적 인 사진이 아주 많이 있습니다. 내 목표는 페이지와 이미지가로드되는 동안 로더를 표시하는 것입니다. 문제는 로더가 사라지고 이미지가 완전히 렌더링되지 않은 것입니다.

이미지가 완전히 렌더링 된 후에 로더가 사라지게하려면 어떻게해야합니까?

다른 소스의 현재 시도입니다.

자바 스크립트 :

(function(){ 

    function id(v){return document.getElementById(v); } 

    function loadbar() { 
var ovrl = id("overlay"), 
    prog = id("progress"), 
    stat = id("progstat"), 
    img = document.images, 
    c = 0; 
    tot = img.length; 

function imgLoaded(){ 
    c += 1; 
    var perc = ((100/tot*c) << 0) +"%"; 
    prog.style.width = perc; 
    stat.innerHTML = "Loading "+ perc; 
    if(c===tot) return doneLoading(); 
} 
function doneLoading(){ 
    ovrl.style.opacity = 0; 
    setTimeout(function(){ 
    ovrl.style.display = "none"; 
    }, 1200); 
} 
for(var i=0; i<tot; i++) { 
    var tImg  = new Image(); 
    tImg.onload = imgLoaded; 
    tImg.onerror = imgLoaded; 
    tImg.src  = img[i].src; 
}  


}document.addEventListener('DOMContentLoaded', loadbar, false);}()); 

Answer 1

당신은 몸

... 
function doneLoading(){ 
    ovrl.style.opacity = 0; 
    setTimeout(function(){ 
    ovrl.style.display = "none"; 
    }, 1200); 
    //you should put 
    document.body.appendChild(this); 
} 
... 

에서 이미지를 놓치고