Loading progress bar doesn't work when loaded in a div

Question

I'm using this code: jsbin ; , in page.php and works well.

However, when in index.php I try to load page.php in a Div, script fails.

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>

I've imported libraries, I've tryied to run script in Index.php and other stuff without result. Where I fail?

Answer 1

I fixed your problem by:

revising the "jsbin" javascript to the following


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

and secondly, I changed your index file to :

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

Actually you can see a live example here:

http://www.createchhk.com/20201028/test2.html (your index, modified as above)

http://www.createchhk.com/20201028/test1.html (your jsbin, modified as above)

The reason is:

document.addEventListener('DOMContentLoaded', loadbar, false), which is in your original jsbin codes will be run immediately on pageload. But your index will not have the opportunity to trigger this "loadbar" function on load because the jquery will need time to load the jsbin into index
I've added a delay (thru settimeout) otherwise the loader will disappear too soon --- before the actual page is loaded and displayed.

Loading progress bar doesn't work when loaded in a div

Question

1 answers

solution1
1 ACCPTED 2020-10-28 14:47:00

Loading progress bar doesn't work when loaded in a div

Question

1 answers

solution1 1 ACCPTED 2020-10-28 14:47:00

solution1
1 ACCPTED 2020-10-28 14:47:00