У меня есть следующий код ниже, который успешно загружает изображения в кэш браузера при PreloadAllImages
функции PreloadAllImages
. Кто-нибудь знает, как отправить простое предупреждение, например "Все изображения были предварительно загружены в кеш браузера". когда загружено последнее изображение (или все изображения). У меня есть 300 изображений, поэтому setTimeOut
не будет работать по причинам задержки/задержки загрузки. Я пробовал обратные вызовы, размещение команд оповещения в разных местах и т.д., Но не увенчались успехом
Этот код основан на JavaScript Only Method # 1, найденном здесь. https://perishablepress.com/3-ways-preload-images-css-javascript-ajax/
function PreLoadAllImages() {
var images = new Array();
function preload() {
for (i = 0; i < preload.arguments.length; i++) {
images[i] = new Image();
images[i].src = preload.arguments[i];
}
}
preload('Images/Image1.jpg', 'Images/Image2.jpg', ... , 'Images/Image300.jpg');
}
Вы можете использовать событие 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 (требуется уведомление после завершения) должна помочь