Предисловие
ImagePool - это инструмент JS для управления загрузкой изображений. ImagePool может управлять количеством параллельных нагрузок изображения.
Для загрузки изображения наиболее примитивный способ - напрямую написать тег IMG, например: <img src = "url изображения" />.
После непрерывной оптимизации появилась схема загрузки задержки изображения. На этот раз URL-адрес изображения записывается не непосредственно в атрибуте SRC, а в определенном атрибуте, таком как: <img src = "" Data-src = "url изображения" />. Таким образом, браузер не будет автоматически загружать изображение. Когда необходимо подходящее время, используйте JS, чтобы поместить URL-адрес в атрибуте Data-SRC в атрибут SRC тега IMG, или после прочтения URL-адреса используйте JS для загрузки изображения и установите атрибут SRC после загрузки и отображение изображения.
Кажется, это хорошо контролируется, но все еще будут проблемы.
Хотя он может загрузить только часть изображения, эта часть изображения все еще может быть относительно большим порядком.
Это не имеет большого значения для стороны ПК, но для мобильной стороны загружается слишком много одновременных изображений, что, вероятно, приведет к сбою приложений.
Поэтому нам срочно нужен механизм буферизации изображения для управления параллелизмом загрузки изображения. Подобно пул соединений с базой данных бэкэнд, он не создает слишком много подключений и может полностью использовать каждое соединение.
На данный момент родился ImagePool.
Плохая схематическая диаграмма
Инструкции для использования
Сначала инициализируйте пул соединений:
var imagepool = initimagepool (5);
initimagepool - это глобальный метод, который можно использовать непосредственно в любом месте. Функция состоит в том, чтобы создать пул соединений, и вы можете указать максимальное количество соединений с пулом соединений, необязательно, по умолчанию составляет 5.
На одной и той же странице многочисленные вызовы в initimagepool возвращают один и тот же экземпляр основного, который всегда является первым, с некоторым чувством синглтона. например:
Кода -копия выглядит следующим образом:
var imagepool1 = initimagepool (3);
var imagepool2 = initimagepool (7);
В настоящее время максимальное количество соединений между ImagePool1 и ImagePool2 составляет 3, а один и тот же экземпляр Core используется внутри. Обратите внимание, что внутреннее ядро такое же, а не то, что ImagePool1 === ImagePool2.
После инициализации вы можете загрузить изображение с уверенностью.
Самый простой способ позвонить - это следующее:
Кода -копия выглядит следующим образом:
var imagepool = initimagepool (10);
imagepool.load ("url изображения", {
Успех: function (src) {
console.log ("Успех :::::"+src);
},
ошибка: function (src) {
console.log ("error ::::"+src);
}
});
Просто вызовите метод загрузки на экземпляр.
Метод нагрузки имеет два параметра. Первый параметр - это URL -адрес изображения, который необходимо загрузить, а второй параметр - это различные параметры, включая успешные и неудачные обратные вызовы. URL -адрес изображения будет передаваться во время обратных вызовов.
Таким образом, вы можете передать только одну картину, так что это также можно записано в следующей форме:
Кода -копия выглядит следующим образом:
var imagepool = initimagepool (10);
imagepool.load (["Image 1URL", "Image 2URL"], {
Успех: function (src) {
console.log ("Успех :::::"+src);
},
ошибка: function (src) {
console.log ("error ::::"+src);
}
});
Передав в массив URL -адреса изображения, вы можете передать несколько изображений.
Когда каждое изображение загружается успешно (или не удастся), будет вызван метод успеха (или ошибки), и будет передаваться соответствующий URL -адрес изображения.
Но иногда нам не нужно часто бывать обратные вызовы. Пропустить в массиве URL -изображения. Когда все изображения в этом массиве обрабатываются, тогда достаточно обратных вызовов.
Просто добавьте один вариант:
Кода -копия выглядит следующим образом:
var imagepool = initimagepool (10);
imagepool.load (["Image 1URL", "Image 2URL"], {
Успех: Функция (Sarray, Earray, Count) {
console.log ("sarray ::::"+sarray);
console.log ("Earray ::::"+Earray);
console.log ("count :::::"+count);
},
ошибка: function (src) {
console.log ("error ::::"+src);
},
Однажды: правда
});
Добавив один раз атрибут в опцию и установив его на True, вы можете выполнить обратный вызов только один раз.
На этот раз метод успеха должен быть вызван обратно, и метод ошибки игнорируется в настоящее время.
В настоящее время метод успеха обратного вызова больше не проходит в параметре URL -адреса изображения, а передает три параметра, а именно: успешный массив URL, неудачный массив URL и общее количество обработанных изображений.
Кроме того, есть способ получить внутреннее состояние пула соединений:
Кода -копия выглядит следующим образом:
var imagepool = initimagepool (10);
console.log (imagepool.info ());
Вызовите метод информации, вы можете получить внутреннее состояние пула соединений в текущее время, и структура данных заключается в следующем:
Object.task.count Номер задач, ожидающих обработки в пуле соединений
Object.Thread.Count максимальное количество подключений к пулу соединений
Object.Thread.free Количество бесплатных подключений с пулом соединений
Рекомендуется не вызывать этот метод часто.
Наконец, следует отметить, что если изображение не загружается, оно будет пытаться не более 3 раза. Если изображение не загружается в конце, метод ошибки будет вызван обратно. Количество попыток может быть изменено в исходном коде.
Наконец, позвольте мне подчеркнуть, что читатели могут максимально продвигать изображения в пул соединений, не беспокоясь о чрезмерной параллелизме. ImagePool поможет вам загрузить эти изображения в беспорядке.
Наконец, следует отметить, что ImagePool не будет теоретически снижать скорость загрузки изображения, это просто плавная нагрузка.
Исходный код
Кода -копия выглядит следующим образом:
(функция (экспорт) {
//Одинокий
var encess = null;
var emptyfn = function () {};
// Начальная конфигурация по умолчанию
var config_default = {
// количество «потоков» в пуле потоков
Тема: 5,
// количество повторений не удалось загрузить изображение
// попробуйте дважды, добавьте исходный, в общей сложности 3 раза
«Попробуй»: 2
};
//инструмент
var _helpers = {
// Установить атрибут DOM
setattr: (function () {
var img = новое изображение ();
// судить, поддерживает ли браузер набор данных HTML5
if (img.dataset) {
возврат функции (dom, name, value) {
dom.dataset [name] = value;
возвращаемое значение;
};
}еще{
возврат функции (dom, name, value) {
dom.setattribute ("data-"+name, value);
возвращаемое значение;
};
}
} ()),
// Получить атрибут DOM
getAttr: (function () {
var img = новое изображение ();
// судить, поддерживает ли браузер набор данных HTML5
if (img.dataset) {
возврат функции (dom, name) {
вернуть dom.dataset [name];
};
}еще{
возврат функции (dom, name) {
return dom.getAttribute ("data-"+name);
};
}
} ())
};
/**
* Построение метода
* @param максимальный номер соединений. Ценить.
*/
Функция ImagePool (max) {
// максимальное количество параллелизма
this.max = max || config_default.thread;
this.linkhead = null;
this.linknode = null;
// загрузка бассейна
// [{img: dom, бесплатно: true, node: node}]
//узел
// {src: "", options: {success: "fn", ошибка: "fn", one: true}, try: 0}
this.pool = [];
}
/**
* Инициализация
*/
Imagepool.prototype.initpool = function () {
var i, img, obj, _s;
_s = это;
for (i = 0; i <this.max; i ++) {
obj = {};
img = новое изображение ();
_helpers.setattr (img, "id", i);
img.onload = function () {
var id, src;
//Перезвонить
//_s.getNode(Tis).options.success.call(null, this.src);
_s.notice (_s.getNode (this), «успех», this.src);
// обработка задач
_s.executelink (это);
};
img.onerror = function (e) {
var node = _s.getNode (this);
// судить о количестве попыток
if (node.try <config_default.try) {
node.try = node.try + 1;
// снова добавить в конец списка задач
_s.appendNode (_s.createNode (node.src, node.options, node.notice, node.group, node.try));
}еще{
// обратный вызов ошибки
//node.options.error.call(null, this.src);
_s.notice (узел, «ошибка», this.src);
}
// обработка задач
_s.executelink (это);
};
obj.img = img;
obj.free = true;
this.pool.push (obj);
}
};
/**
* Инкапсуляция обратного вызова
* @param Узел Узел. Объект.
* @param статус статуса. Нить. Необязательное значение: успех | Ошибка (не удалась)
* @param SRC PATH. Нить.
*/
Imagepool.prototype.notice = function (node, status, src) {
node.notice (status, src);
};
/**
* Обработка связанных списков задач
* @param Dom Image объект DOM. Объект.
*/
Imagepool.prototype.executelink = function (dom) {
// Распознайте, есть ли узлы в связанном списке
if (this.linkhead) {
// Загрузите следующее изображение
this.setsrc (dom, this.linkhead);
// Удалить заголовок ссылки
this.shiftnode ();
}еще{
// Установите свой собственный статус на холостое время
this.status (dom, true);
}
};
/**
* Получите холостое «ветка»
*/
Imagepool.prototype.getFree = function () {
var длина, я;
for (i = 0, length = this.pool.length; i <length; i ++) {
if (this.pool [i] .free) {
вернуть это.
}
}
вернуть ноль;
};
/**
* Инкапсулирует настройки атрибута SRC
* Поскольку изменение атрибута SRC эквивалентно загрузке изображения, инкапсулируйте операцию
* @param Dom Image объект DOM. Объект.
* @param Узел Узел. Объект.
*/
Imagepool.prototype.setsrc = function (dom, node) {
// Установить «Поток» в бассейне, чтобы быть неэдле
this.status (dom, false);
// Аффилированный узел
this.setNode (dom, узлы);
// Загрузите изображение
dom.src = node.src;
};
/**
* Обновите статус «потока» в пуле
* @param Dom Image объект DOM. Объект.
* @param статус статуса. Логический. Необязательное значение: true (idle) | ложь (неэдле)
*/
Imagepool.prototype.status = function (dom, status) {
var id = _helpers.getattr (dom, "id");
this.pool [id] .free = status;
// состояние холостого хода, очистить связанный узел
if (status) {
this.pool [id] .node = null;
}
};
/**
* Обновите связанный узел «потока» в пуле
* @param Dom Image объект DOM. Объект.
* @param Узел Узел. Объект.
*/
Imagepool.prototype.setnode = function (dom, node) {
var id = _helpers.getattr (dom, "id");
this.pool [id] .node = node;
вернуть это.
};
/**
* Получите связанный узел «потока» в бассейне
* @param Dom Image объект DOM. Объект.
*/
Imagepool.prototype.getNode = function (dom) {
var id = _helpers.getattr (dom, "id");
вернуть this.pool [id] .node;
};
/**
* Внешний интерфейс, загрузите изображения
* @param SRC может быть строкой SRC или массивом строк SRC.
* @param параметры, определенные пользовательскими параметрами. Включает в себя: вызов успеха, обратный вызов ошибки, после тега.
*/
Imagepool.prototype.load = function (src, options) {
var srcs = [],
бесплатно = null,
длина = 0,
i = 0,
// только инициализируйте стратегию обратного вызова только один раз
уведомление = (function () {
if (options.once) {
возврат функции (Status, src) {
var g = this.group,
o = this.options;
//Записывать
G [статус] .push (src);
// Выясните, были ли все реорганизации обработаны
if (g.success.length + g.error.length === g.count) {
//асинхронный
// Фактически, он выполняется отдельно в качестве еще одной задачи, чтобы не допустить, чтобы функция обратного вызова не выполняла слишком долго и влияла на скорость загрузки изображения
settimeout (function () {
o.success.call (null, g.success, g.error, g.count);
}, 1);
}
};
}еще{
возврат функции (Status, src) {
var o = this.options;
// Прямой обратный вызов
settimeout (function () {
o [status] .call (null, src);
}, 1);
};
}
} ()),
Group = {
Подсчет: 0,
успех: [],
ошибка: []
},
узел = null;
Параметры = Параметры || {};
Options.success = Options.Success || пусто;
Options.Error = Options.Error || пусто;
srcs = srcs.concat (src);
// Установить количество групповых элементов
group.count = srcs.length;
// путешествовать по картинкам, которые необходимо загрузить
for (i = 0, length = srcs.length; i <length; i ++) {
// Создать узел
node = this.createNode (srcs [i], опции, уведомление, группа);
// судить, является ли пул потоков бесплатным
бесплатно = this.getFree ();
if (бесплатно) {
// Если у вас есть свободное время, немедленно загрузите изображение
this.setsrc (free.img, node);
}еще{
// нет холостого хода, добавьте задачу в связанный список
this.appendnode (узлы);
}
}
};
/**
* Получить информацию о внутреннем статусе
* @returns {{}}
*/
Imagepool.prototype.info = function () {
var info = {},
длина = 0,
i = 0,
узел = null;
//Нить
info.Thread = {};
// общее количество потоков
info.thread.count = this.pool.length;
// количество холостовых потоков
info.thread.free = 0;
//Задача
info.task = {};
// количество ожидающих задач
info.task.count = 0;
// Получить количество бесплатных «потоков»
for (i = 0, length = this.pool.length; i <length; i ++) {
if (this.pool [i] .free) {
info.thread.free = info.thread.free + 1;
}
}
// Получить количество задач (длина цепочки задач)
node = this.linkhead;
if (node) {
info.task.count = info.task.count + 1;
while (node.next) {
info.task.count = info.task.count + 1;
node = node.next;
}
}
вернуть информацию;
};
/**
* Создать узел
* @param SRC PATH. Нить.
* @param параметры, определенные пользовательскими параметрами. Включает в себя: вызов успеха, обратный вызов ошибки, после тега.
* @param Уведомление о обратном обратном направлении. функция
* @param Group Information. Объект. {count: 0, успех: [], ошибка: []}
* @param tr Количество ошибок повторения. Ценить. По умолчанию 0.
* @returns {{}}
*/
Imagepool.prototype.createNode = function (src, опции, уведомление, группа, tr) {
var node = {};
node.src = src;
node.options = options;
node.notice = уведомление;
node.group = группа;
node.try = tr || 0;
вернуть узел;
};
/**
* Добавление узлов в конце списка задач
* @param Узел Узел. Объект.
*/
Imagepool.prototype.appendnode = function (node) {
// судить, пуст ли связанный список
if (! this.linkhead) {
this.linkhead = node;
this.linknode = node;
}еще{
this.linknode.next = node;
this.linknode = node;
}
};
/**
* Удалить заголовок ссылки
*/
Imagepool.prototype.shiftnode = function () {
// Распознайте, есть ли узлы в связанном списке
if (this.linkhead) {
// Измените заголовок списка ссылок
this.linkhead = this.linkhead.next || нулевой;
}
};
/**
* Экспорт внешнего интерфейса
* @param максимальный номер соединений. Ценить.
* @returns {{load: function, info: function}}
*/
exports.initimagepool = function (max) {
if (! Extance) {
exants = new Imagepool (max);
exante.initpool ();
}
возвращаться {
/**
* Загрузка изображений
*/
нагрузка: function () {
ences.load.apply (encement, аргументы);
},
/**
* Внутренняя информация
* @returns {* | any | void}
*/
Info: function () {
return exaction.info.call (exant);
}
};
};
}(этот));
Приведенное выше пример того, как использовать этот особенно удивительный менеджер по загрузке изображения JavaScript. Вы узнали, как его использовать?