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

Используйте array, чтобы сохранить каждый прогресс и создать функцию для загрузки изображения и записи необходимой информации для вас.

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>