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

Question

我正在使用此代码： jsbin ； , 在page.php运行良好。

但是，当我在index.php尝试在 Div 中加载page.php时，脚本失败。

索引.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 和其他东西中运行脚本而没有结果。 我哪里失败了？

Answer 1

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

将“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代码中会在页面加载时立即运行。 但是您的索引将没有机会在加载时触发此“加载栏”功能，因为 jquery 需要时间将 jsbin 加载到索引中
我添加了一个延迟（通过 settimeout），否则加载器会过早消失——在实际页面加载和显示之前。

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-10-28 14:47:00

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-10-28 14:47:00

解决方案1
1 已采纳 2020-10-28 14:47:00