在div中加载时，加载进度栏不起作用

Gp90 发表于 Dev

GP90

我正在使用此代码：jsbin ; ，page.php并且效果很好。

但是，当index.php我尝试加载page.phpDiv时，脚本将失败。

Index.php：

$('#myDiv').load('page.php');

.one {
  width:500px;
  height:400px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myDiv" class="one"></div>

我已经导入了库，尝试在Index.php和其他内容中运行脚本而没有结果。我哪里失败了？

李健

我通过以下方式解决了您的问题：

将“ jsbin” javascript修改为以下内容


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


setTimeout(function(){ loadbar(); }, 3000);

其次，我将您的索引文件更改为：

<style>
.one {
  width:500px;
  height:400px;
}
</style>


<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
   
   $('#content').load("test1.html");
 
   
});
</script>
</head>
<body>

<div id="content" class="one"></div>

</body>
</html>

实际上，您可以在此处看到一个实时示例：

http://www.createchhk.com/20201028/test2.html（您的索引，如上修改）

http://www.createchhk.com/20201028/test1.html（您的jsbin，如上修改）

原因是：

document.addEventListener（'DOMContentLoaded'，loadbar，false），位于您原始jsbin代码中，将在页面加载时立即运行。但是您的索引将没有机会在加载时触发此“ loadbar”功能，因为jQuery将需要时间将jsbin加载到索引中
我添加了一个延迟（通过settimeout），否则加载器会很快消失---在加载和显示实际页面之前。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。