Question

我的页面上有很多静态照片。我的目标是在页面和图像加载时显示加载程序。问题是我的加载器消失后，图像还没有完全渲染。

如何在图像完全渲染后使加载器消失？

以下是我目前来自不同来源的尝试。

使用Javascript：

(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);
}
...

装载机消失但图像未完全渲染

1 个答案: