时间戳

首页 > 解决方案 > 如何制作一个加载栏，每次加载图片时更新并添加百分比

javascript - 如何制作一个加载栏，每次加载图片时更新并添加百分比

问题描述

如何制作每次加载图片时更新并添加百分比的加载栏？它还将知道有多少张图片并计算一张图片的百分比。

我也尝试过使用 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  + '%';
    }
  }
}

标签： javascriptphphtml

解决方案

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

推荐阅读