Javascript - 带有多个图像的进度条

Question

我想预加载一堆图像并同时显示进度条。

目前代码仅适用于 1 个图像，如下:

$progress = document.querySelector('#progress');

var url = 'https://placekitten.com/g/2000/2000';

var request = new XMLHttpRequest();
request.onprogress = onProgress;
request.onload = onComplete;
request.onerror = onError;

function onProgress(event) {
  if (!event.lengthComputable) {
    return;
  }
  var loaded = event.loaded;
  var total = event.total;
  var progress = (loaded / total).toFixed(2);

  $progress.textContent = 'Loading... ' + parseInt(progress * 100) + ' %';

  console.log(progress);
}

function onComplete(event) {
  var $img = document.createElement('img');
  $img.setAttribute('src', url);
  $progress.appendChild($img);
  console.log('complete', url);
}

function onError(event) {
  console.log('error');
}


$progress.addEventListener('click', function() {
  request.open('GET', url, true);
  request.overrideMimeType('text/plain; charset=x-user-defined');
  request.send(null);
});

<div id="progress">Click me to load</div>

这是测试代码的 jsfiddle:https://jsfiddle.net/q5d0osLr/

如何使其适用于多张图像？

Answer 1

使用数组来存储每个进度，并创建一个函数来加载图像并为您记录必要的信息。

var $progress = document.querySelector('#progress');
var url = 'https://placekitten.com/g/';
var urls = 
          ['https://i.imgur.com/7raUYR2.jpg', 'https://i.imgur.com/i8GSA1b.jpg', 'https://i.imgur.com/jGkaxEZ.jpg',
            'http://i.imgur.com/cuS5DDv.jpg', 'https://i.imgur.com/bl5DOR0.jpg', 'http://i.imgur.com/TuFu2lK.jpg',
            'https://i.imgur.com/qbwarWi.jpg', 'https://i.imgur.com/hJ9Ylph.gif', 'https://i.imgur.com/8KLbDxe.jpg',
             'https://upload.wikimedia.org/wikipedia/commons/thumb/4/4e/Pleiades_large.jpg/1024px-Pleiades_large.jpg',
           ];

// Store all progress.
var allProgress = [];


var loadImage = function(url) {
  // Get current index.
  var idx = allProgress.length;
  // Push a progress in array.
  allProgress.push(0.0);


  var onProgress = function(evt) {
    if (!evt.lengthComputable) {
      return;
    }
    var loaded = evt.loaded;
    var total = evt.total;
    var progress = (loaded / total);

    allProgress[idx] = progress;
    
    // Calculate the progress by sum then divide.
    var sum = allProgress.reduce(function(sum, val) {
      return sum + val;
    });
    sum /= allProgress.length;
    sum = sum.toFixed(2);

    $progress.textContent = 'Loading... ' + parseInt(sum * 100) + ' %';

    console.log(progress, idx);
  };

  var onComplete = function(evt) {
    var $img = document.createElement('img');
    $img.setAttribute('src', url);
    document.body.appendChild($img);
    console.log('complete', url);
  };

  var onError = function(evt) {
    // You may have to do something with progress.
    console.log('error');
  };
  
  // Move the request in function. So each of them is independent.
  var request = new XMLHttpRequest();
  request.onprogress = onProgress;
  request.onload = onComplete;
  request.onerror = onError;

  request.open('GET', url, true);
  request.overrideMimeType('text/plain; charset=x-user-defined');
  request.send(null);
};

$progress.addEventListener('click', function() {
  urls.forEach(function(url) {
    loadImage(url);
  });
});

img {
  width: 100px;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="progress">Click me to load</div>