Javascript - как синхронно предварительно загружать изображения, а затем выполнять обратный вызов, когда они все загружены - PullRequest
Новая
       32

Javascript - как синхронно предварительно загружать изображения, а затем выполнять обратный вызов, когда они все загружены

0 голосов
/ 31 мая 2019

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

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

То, что я пытаюсь сделать, - это предварительно загрузить один массив изображений, проверить сравнение временных меток, ранее сохраненных в переменной, чтобы увидеть, работает ли сеть медленно или нет, а затем (если сеть работает медленно) предварительно загрузить второй массив изображений. используя ту же функцию предварительной загрузки, когда первый массив готов, затем запустите мою функцию слайд-шоу изображений, как только второй массив будет готов. Это сделано для того, чтобы избежать запуска слайд-шоу с изображениями до того, как будет загружено достаточно изображений - чтобы избежать пустых слайдов, если это имеет смысл.

Код, который работает, но только асинхронно: 

function preload(arr){
var newimages=[], loadedImages = 0;
var postaction=function(){}
var arr=(typeof arr!="object")? [arr] : arr;
function imageloadpost(){
    loadedImages++;
    if (loadedImages==arr.length){
        postaction(newimages); //call postaction and pass in newimages array as parameter
    }
}
for (var i=0; i<arr.length; i++){
    newimages[i]=new Image();
    newimages[i].src=arr[i];
    newimages[i].onload=function(){
        imageloadpost();
    }
    newimages[i].onerror=function(){
        imageloadpost();
    }
}
return { //return blank object with done() method
    done:function(f){
        postaction=f || postaction; //remember user defined callback functions to be called when images load
    }
}

}

Пример результата, который я хочу получить:

Изображение 1 ... Загружен, затем ...
Изображение 2 ... Загружен, затем ...
Изображение 3 ... Загружен, затем ...
Обратный звонок: все загружены - сделать что-то еще

UPDATE

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

function preload(arrayOfImages, index) {
index = index || 0;
if (arrayOfImages && arrayOfImages.length && arrayOfImages.length > index) {
    var img = new Image();
    img.onload = function() {
        preload(arrayOfImages, index + 1);
    };
    img.onerror = function() {
        preload(arrayOfImages, index + 1);
    };
    img.src = arrayOfImages[index];
}
$j('#slide-' + index + '').addClass('loaded');
}
...