Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.10.2019, 11:43
Аватар для madeas
Профессор
Отправить личное сообщение для madeas Посмотреть профиль Найти все сообщения от madeas
 
Регистрация: 13.04.2018
Сообщений: 232

Loader 2019 для лендинга
Привет всем!

Я редко использую прелоадеры при разработке сайтов. Тем более, стараюсь не использовать 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 ?Полагаю, вопросы немного глупые, но, все же, интересно мнение экспертов.
Ответить с цитированием
  #2 (permalink)  
Старый 09.10.2019, 11:47
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,830

Сообщение от madeas
На нативном js
этот будет оптимальнее, с Promise лишний код попросту над этим вариантом.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Правильно вызвать массив biryukovm Элементы интерфейса 3 19.03.2018 12:31
[job] JS-разработчик (+Angular) на UI внутреннего проекта (для других разработчиков:) Anna-HR Работа 12 19.01.2015 12:50
drag-and-drop и position:fixed dotwatt Элементы интерфейса 5 05.12.2012 06:44
IDE для Java Script constant Библиотеки/Тулкиты/Фреймворки 0 27.09.2012 08:31