Чтобы загрузить несколько изображений в JavaScript, вы можете использовать различные методы. Вот несколько подходов:

1. Использование конструктора Image(): вы можете создать несколько экземпляров объекта Image и установить свойство source (src) для каждого изображения. При этом изображения будут предварительно загружены перед их отображением на веб-странице.

function loadImages(imageSources, callback) {
  var loadedImages = 0;
  var totalImages = imageSources.length;
  imageSources.forEach(function(src) {
    var img = new Image();
    img.onload = function() {
      loadedImages++;
      if (loadedImages === totalImages) {
        callback();
      }
    };
    img.src = src;
  });
}
// Usage:
var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
loadImages(images, function() {
  console.log('All images loaded.');
});

2. Использование API fetch(). Вы можете использовать функцию fetch(), чтобы делать запросы для каждого URL-адреса изображения и загружать их асинхронно. Этот метод позволяет обрабатывать ошибки и выполнять дополнительные операции с загруженными изображениями.

function loadImages(imageSources, callback) {
  var loadedImages = 0;
  var totalImages = imageSources.length;
  imageSources.forEach(function(src) {
    fetch(src)
      .then(function(response) {
        if (response.ok) {
          return response.blob();
        }
        throw new Error('Network response was not ok.');
      })
      .then(function(blob) {
        var img = document.createElement('img');
        img.onload = function() {
          loadedImages++;
          if (loadedImages === totalImages) {
            callback();
          }
        };
        img.src = URL.createObjectURL(blob);
      })
      .catch(function(error) {
        console.error('Image load error:', error);
      });
  });
}
// Usage:
var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
loadImages(images, function() {
  console.log('All images loaded.');
});

3. Использование библиотеки jQuery. Если вы используете jQuery в своем проекте, вы можете использовать ее функцию $.when()для асинхронной загрузки нескольких изображений.

function loadImages(imageSources, callback) {
  var deferreds = [];
  imageSources.forEach(function(src) {
    var img = $('<img>');
    var deferred = $.Deferred();
    img.on('load', function() {
      deferred.resolve();
    });
    img.on('error', function() {
      deferred.reject();
    });
    img.attr('src', src);
    deferreds.push(deferred);
  });
  $.when.apply(null, deferreds).done(function() {
    callback();
  });
}
// Usage:
var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
loadImages(images, function() {
  console.log('All images loaded.');
});