Андрей Мотошин Front-end engineer

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

В своё время для таких целей я и искал хороший прелоадер, но так и не смог найти решения, которое бы меня полностью удовлетворяло. Пришлось написать свой.

В нём есть базовый функционал, позволяющий выполнять две основные функции: загружать изображения и вызывать после этого коллбэк. Но так же есть и свои фичи. Он может загружать картинки по очереди в том порядке, в котором они были помещены в массив. Не только по одному, а по два-три-N. А на каждую итерацию загрузки может выполнять коллбэк. Но и это ещё не всё: после загрузки последнего изображения выполнится финальный коллбэк, говорящий о том, что все изображения загружены.

Использование

Существует два варианта использования jQuery.preload. Первый — передавать адрес(а) изображений:

$.preload(images, [part], [callback]);

• images
  Адрес изображения на вход можно подавать как строкой (для одной картинки), так и массивом.
• part
  Далее идет необязательный параметр, указывающий по сколько изображений загружать за раз. 0 — значит все разом, значение по умолчанию.
• callback
  Ну и наконец коллбэк — функция, которая выполнится по завершении загрузки изображения. Ей можно указать свой параметр last, принимающий значение true, если эта часть последняя.

Второй вариант использования — загружать все изображения и фоновые картинки в элементе:

$('#elem').preload([callback]);

• callback
  Функция, которая выполнится после загрузки всех изображений.

Примеры

• Загрузка по очереди — изображения будут загружаться по одному, после загрузки каждого сработает коллбэк, а после загрузки последнего сработает финальный коллбэк.
• Загрузка картинок с data-* атрибутом — коллбэк отображает ранее скрытые, но уже загруженные изображения.
• Загрузка фоновых картинок — коллбэк отображает ранее скрытые, но уже загруженные изображения.

Для корректной работы плагина требуется jQuery версии 1.6 или выше.

А вот и сам скрипт: github.com/htmlhero/jQuery.preload. Буду рад получить от вас обратную связь.