Question

我在下面有以下页面预加载器，我正在尝试修改它。

当前脚本实际上正在等待加载图像。我希望修改它以成为整页的预加载器。例如，一旦DOM准备好（图像，文本，脚本等），就停止预加载，而不仅仅是图像。

这个脚本实际上是在图像上循环，这不是很可靠，因为它可能会发起额外的请求，而且Web应用程序可能没有图像。

归功于脚本here。

＆＃13;

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

＆＃13;

*{margin:0;}

body{
  font: 200 16px/1 Helvetica, Arial, sans-serif;
}

img{width:32.2%;}

#overlay{
  position:fixed;
  z-index:99999;
  top:0;
  left:0;
  bottom:0;
  right:0;
  background:rgba(0,0,0,0.9);
  transition: 1s 0.4s;
}
#progress{
  height:1px;
  background:#fff;
  position:absolute;
  width:0;
  top:50%;
}
#progstat{
  font-size:0.7em;
  letter-spacing: 3px;
  position:absolute;
  top:50%;
  margin-top:-40px;
  width:100%;
  text-align:center;
  color:#fff;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Loading overlay - Demo by Roko C.B</title>
</head>
<body>

  

      <div id="overlay">
        <div id="progstat"></div>
        <div id="progress"></div>
      </div>

      <div id="container">
        <img src="http://placehold.it/3000x3000/cf5">
        <img src="http://placehold.it/3000x3000/f0f">
        <img src="http://placehold.it/3000x3000/fb1">
        <img src="http://placehold.it/3000x3000/ada">
        <img src="http://placehold.it/3000x3000/045">
        <img src="http://placehold.it/3000x3000/b00">
        <img src="http://placehold.it/3000x3000/41b">
        <img src="http://errrrrrrrrrror.it/errorImage">
        <img src="http://placehold.it/3000x3000/098">
        <img src="http://placehold.it/3000x3000/987">
        <img src="http://placehold.it/3000x3000/f25">
        <img src="http://placehold.it/3000x3000/526">
        <img src="http://placehold.it/3000x3000/826">
        <img src="http://placehold.it/3000x3000/ad6">
        <img src="http://placehold.it/3000x3000/74c">
        <img src="http://placehold.it/3000x3000/b40">
        <img src="http://placehold.it/3000x3000/cc7">
        <img src="http://placehold.it/3000x3000/112">
        <img src="http://placehold.it/3000x3000/113">
      </div>
  
  
  
</body>
</html>

＆＃13;

Answer 1

我尽量让它变得容易。您只需制作一个全宽度高度div并在加载dom时将其删除。

带有glyphicon的

Pen#1 Pen #2带图片
Pen#3与SVG

    <div id="cover"></div>

<script>
    $(window).on('load', function () {
    $("#cover").fadeOut(1500);
    });
</script>

Javascript整页预加载器脚本修改

1 个答案: