Предварительная загрузка изображений в JavaScript (требуется уведомление после завершения)

Вы можете использовать событие onload.

function PreLoadAllImages() {
  var images = new Array();
  var numberofimages = 0, loadedimages = 0;
  function preload() {
    numberofimages = preload.arguments.length;
    for (i = 0; i < preload.arguments.length; i++) {
      images[i] = new Image();
      images[i].src = preload.arguments[i];
      images[i].onload = () => {
         loadedimages++;
         if(loadedimages == numberofimages){
             alert("All images are loaded");
         }
      }
    }
  }

  preload('Images/Image1.jpg', 'Images/Image2.jpg', ... , 'Images/Image300.jpg');
}

С некоторой помощью, это - то, как проблема была решена в случае, если кому-то еще это нужно. Загружал изображения в невидимый div на html-странице, затем запускал скрипт, чтобы убедиться, что все было загружено. Кнопка вызывает PreLoadAllImages(), а затем CheckImages().

var imagefiles = [
"Images/Image1.jpg",
"Images/Image2.jpg",
.....
"Images/Image300.jpg"];

function PreLoadAllImages () {
    imagefiles.forEach(function(image){
        var img = document.createElement('img');
        img.src = image;
        document.body.appendChild(img);});
    $('img').hide();
} 

var all_loaded;

function CheckImages() {
    $('img').each(function(){ // selecting all image element on the page
    var img = new Image($(this)); // creating image element
    img.src = $(this).attr('src'); // pass src to image object
    if(img.complete==false) {
        all_loaded=false;
        return false;
    }
    all_loaded=true;
    return true;});
}

function CheckLoadingImages() {
    var result;
    var Checking=setInterval(function(){
         result=CheckImages();
         if(all_loaded==true) {
             clearInterval(Checking);
             MsgAfterLoading();
            }
         }, 2000);
}

function MsgAfterLoading() {
    alert('All Images Loaded');
}

Обещание может решить вашу проблему.

https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise

var myPromise = new Promise( function(resolve, reject) {
    // preload code
    resolve(true);
};

myPromise.then(function() {
    // your alert
};

Вы можете проверить, равен ли я длине массива, поэтому он будет выглядеть так:

for (i = 0; i < preload.arguments.length; i++) {
        images[i] = new Image()
        images[i].src = preload.arguments[i]
        //the code
        if (i == preload.arguments.length){
            alert("Last image loaded");
        }
        //the code
    }

Дайте знать, если у вас появятся вопросы.

Не могли бы вы попробовать пройтись по всем элементам изображения и проверить свойство naturalWidth, если они все больше 0, и это последнее изображение, а затем предупреждение.

Ссылка: Предварительная загрузка изображений в JavaScript (требуется уведомление после завершения) должна помочь