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

1. Загрузка данных (из атрибута data-images )
2. Добавление данных в конец очереди прелоадера
3. Сообщаем прелоадеру, что делать, когда данные предварительно загружены

 var Deck = function (node, preloader) { // We get and parse the data from the `data-images` attribute var data = JSON.parse(node.getAttribute('data-images')); // We call the `queue` method from the preloader, passing it the data and a // callback function preloader.queue(data, function () { node.classList.add('loaded'); }); }; 

Пока все идет хорошо, не так ли? Остается только предзагрузчик, хотя это также самый сложный фрагмент кода из этой статьи.

Сборка Preloader

Мы уже знаем, что нашему предварительному загрузчику нужен метод queue чтобы добавить коллекцию изображений в очередь, и метод preload чтобы запустить предварительную загрузку. Ему также понадобится вспомогательная функция для предварительной загрузки изображения, называемая preloadImage . Давайте начнем с этого:

 var ImagePreloader = function () { ... }; ImagePreloader.prototype.queue = function () { ... } ImagePreloader.prototype.preloadImage = function () { ... } ImagePreloader.prototype.preload = function () { ... } 

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

 var ImagePreloader = function () { this.items = []; } 

items — это массив объектов, каждый из которых имеет два ключа:

• collection содержащая массив изображений URL для предварительной загрузки,
• callback содержащий функцию для выполнения, когда колода полностью загружена.

Зная это, мы можем написать метод queue .

 // Empty function in case no callback is being specified function noop() {} ImagePreloader.prototype.queue = function (array, callback) { this.items.push({ collection: array, // If no callback, we push a no-op (empty) function callback: callback || noop }); }; 

Хорошо. На этом этапе каждая колода может добавлять свои изображения в очередь. Теперь нам нужно создать метод preload , который позаботится о фактической предварительной загрузке изображений. Но прежде чем переходить к коду, давайте сделаем шаг назад, чтобы понять, что нам нужно делать.

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

Предварительная загрузка изображения означает создание нового изображения из JavaScript (с использованием new Image() ) и применение к нему src . Это приведет к тому, что браузер загрузит источник асинхронно. Из-за этого асинхронного процесса нам нужно зарегистрировать обещание, которое разрешится, когда ресурс будет загружен браузером.

По сути, мы заменим каждый URL изображения из наших массивов обещанием, которое будет выполнено, когда данное изображение будет загружено браузером. На этом этапе мы сможем использовать Promise.all(..) чтобы получить окончательное обещание, которое разрешается, когда все обещания из массива разрешены. И это для каждой колоды.

Давайте начнем с метода preloadImage :

 ImagePreloader.prototype.preloadImage = function (path) { return new Promise(function (resolve, reject) { // Create a new image from JavaScript var image = new Image(); // Bind an event listener on the load to call the `resolve` function image.onload = resolve; // If the image fails to be downloaded, we don't want the whole system // to collapse so we `resolve` instead of `reject`, even on error image.onerror = resolve; // Apply the path as `src` to the image so that the browser fetches it image.src = path; }); }; 

А теперь метод preload . Он делает две вещи (и, следовательно, может быть разделен на две разные функции, но это выходит за рамки данной статьи):

1. Он заменяет все URL-адреса изображений обещаниями в определенном порядке (сначала изображение из каждой колоды, затем второе, затем третье …)
2. Для каждой колоды регистрируется обещание, которое вызывает колбэк из колоды, когда все обещания колоды разрешены (!)

 ImagePreloader.prototype.preload = function () { // Promises are not supported, let's leave if (!('Promise' in window)) { return; } // Get the length of the biggest deck var max = Math.max.apply(Math, this.items.map(function (el) { return el.collection.length; })); // Loop from 0 to the length of the largest deck for (var i = 0; i < max; i++) { // Iterate over the decks this.items.forEach(function (item) { // If the deck is over yet, do nothing, else replace the image at // current index (i) with a promise that will resolve when the image // gets downloaded by the browser. if (typeof item.collection[i] !== 'undefined') { item.collection[i] = this.preloadImage(item.collection[i]) } }, this); } // Iterate over the decks this.items.forEach(function (item, index) { // When all images from the deck have been fetched by the browser Promise.all(item.collection) // Execute the callback .then(function () { item.callback() }) .catch(function (err) { console.log(err) }); }); }; 

Это оно! В конце концов, не так уж сложно, ты согласен?

Толкая вещи дальше

Код работает отлично, хотя использование обратного вызова, чтобы сказать прелоадеру, что делать, когда загружена колода, не очень элегантно. Возможно, вы захотите использовать Обещание, а не обратный вызов, тем более что мы все время использовали Обещания!

 ImagePreloader.prototype.queue = function (array) { var d = defer(); this.items.push({ collection: array, deferred: d }); return d.promise; }; 

 this.items.forEach(function (item) { Promise.all(item.collection) .then(function () { item.deferred.resolve() }) .catch(console.log.bind(console)); }); 

 preloader.queue(data) .then(function () { node.classList.add('loaded'); }) .catch(console.error.bind(console));