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 ?Полагаю, вопросы немного глупые, но, все же, интересно мнение экспертов.

этот будет оптимальнее, с Promise лишний код попросту над этим вариантом.