ninelines-preloader
v1.3.6
Published
Preloader for your website
Downloads
11
Readme
ninelines-preloader
Библиотека для создания прелодера на сайте.
Установка
NPM
npm install --save ninelines-preloader
Использование:
Подключаем стили:
@import "node_modules/ninelines-preloader/src/ninelines-preloader";
Подключаем скрипт:
import Preloader from 'ninelines-preloader';
При отсутствии модульной системы библиотека (
dist/ninelines-preloader.js
) экспортируетPreloader
в глобальный объектninelines
:ninelines.Preloader.init();
Инициализируем:
Preloader.init()
.then(() => {
document.querySelector('.preloader').style.display = 'none';
showPage();
});
По умолчанию для прелоадера установлено минимальное время отображения, равное 3 секундам. Этот параметр можно изменить:
Preloader.init(5000)
.then(() => {
// ...
});
Библиотека поддерживает предварительную загрузку изображений:
// Загружаем одно изображение в момент отображение прелоадера
Preloader.init('/images/background.jpg')
.then(() => {
// ...
});
// Можно изменить минимальное время отображения
Preloader.init('/images/background.jpg', 5000)
.then(() => {
// ...
});
// Или загрузить сразу несколько изображений
Preloader.init([
'/images/image-1.jpg',
'/images/image-2.jpg',
'/images/image-3.jpg',
])
.then(() => {
// ...
});
Нюансы работы прелоадера в Safari
Если изначально блоки с изображениями скрыты через CSS (т.е. имеют стиль display: none
), то при появлении этих
блоков, Safari еще раз загрузит эти изображения.
Чтобы этого избежать, следует предварительно скрывать блоки не через display: none
, а с помощью позиционирования за пределами экрана position: absolute; left: -9999px;
.