Привет всем!
Я редко использую прелоадеры при разработке сайтов. Тем более, стараюсь не использовать jQuery (или использовать минимально). Большинство функций на лендингах являются простыми (клик, скрытие, калькуляторы, модалки и прочее), для которых достаточно нативного js.
В общем. На jQuery обычный прелоадер выглядит так:
$(window).on('load', function () {
const $preloader = $('#body_loader'),
pre_img = $preloader.find('.pre_loader');
pre_img.fadeOut();
$preloader.delay(400).fadeOut('slow');
});
На нативном js, немного поменяв структуру html, это можно реализовать так:
document.body.onload = () => {
setTimeout(() => {
var preloader = document.getElementById('body_loader');
if (!preloader.classList.contains('load_h')) {
preloader.classList.add('load_h');
}
}, 400)
};
Сегодня нашел немного иное решение, основанное на использовании промисов. Тоже работает.
function loadData() {
return new Promise((resolve, reject) => {
setTimeout(resolve, 400);
})
}
loadData().then(() => {
let preloader = document.getElementById('body_loader');
preloader.classList.add('load_h');
preloader.classList.remove('load_v');
});
Я в js не очень хорошо разбираюсь и некоторые особенности для меня все еще сложноваты. Подскажите, насколько последний вариант актуален? Чем он лучше/хуже предыдущего? Стоит ли его использовать, или остановиться на в.2 ?Полагаю, вопросы немного глупые, но, все же, интересно мнение экспертов.
