Question

如何制作一个加载栏，每次加载图片时都会更新并增加一个百分比？它还会知道有多少张图片，然后计算一张图片的百分比。

我也尝试过使用jQuery。

谢谢！

    <?php 
echo 'loaded: ' . $countImageLoaded;
?>
<div style="display:none;" id="images">

<div class="row"> 
<?php
$countImageLoaded= 0 ;
$dirname = "files/pictures/files/";
$images = glob($dirname."*.*");

foreach($images as $image) {
    //echo '<div class="column"><img src="'.$image.'" style="width:100%"></div>';
    $countImageLoaded++;
} 

?>
<script>

window.onload = function() 
  { document.getElementById("images").style.display = "block"; }


var header = document.getElementById("myHeader");
var btns = header.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}


function move() {
  var elem = document.getElementById("myBar");   
  var width = 10;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++; 
      elem.style.width = width + '%'; 
      elem.innerHTML = width * 1  + '%';
    }
  }
}

Answer 1

老实说，我要做的是制作一个动画加载栏，客户端不一定需要知道实际进度。它只是为进度条设置动画，并保持为99％，直到功能完成。不需要与实际进度相关联，只需保持用户耐心即可。

如何制作加载栏，每次加载图片时都会更新并增加一定百分比

1 个答案: