Как составить условие для прелоадер по времени?

Question

[Александр Янк]

Подскажите, как правильно составить условия для прелоадера:
Если страница полностью не загружена в течении 10 секунд, то не показывай прелоадер?

setTimeout(function () {
    fadePreLoader(preLoader);
}, 10000);


window.onload = function () {
    fadePreLoader(preLoader);
};

Как эти два кода совместить, что бы не выполнялась функция fadePreLoader(preLoader); по два раза?

var preLoader = document.getElementById("before-load");

function fadePreLoader(el) {
    el.style.opacity = 1;
    var interPreLoader = setInterval(function () {
        el.style.opacity = el.style.opacity - 0.05;
        if (el.style.opacity <= 0.05) {
            clearInterval(interPreLoader);
            preLoader.style.display = "none";
        }
    }, 16);
}

//Вот так НЕ работает
setTimeout(function () {
    fadePreLoader(preLoader);
}, 10000);

//Вот так работает
window.onload = function () {
    fadePreLoader(preLoader);
};

Ссылка на песочницу:


https://codepen.io/alex-lenk/pen/PXXVPp

Answer 1

[2cha.headz]

https://codepen.io/glagolew059/pen/dwwEBW

Answer 2

[leni_m]

как я понимаю у вас 2 условия для скрытия прелоадера:
1) по прошествии 10 секунд.
2) при полной загрузке страницы.
Предлагаю переделать функцию:

function fadePreLoader(el) {
if (isVisiblePreloader) {
    el.style.opacity = 1;
    var interPreLoader = setInterval(function () {
        el.style.opacity = el.style.opacity - 0.05;
        if (el.style.opacity <= 0.05) {
            clearInterval(interPreLoader);
            preLoader.style.display = "none";
        }
    }, 16);
    isVisiblePeloader = false;
}
}

и после самого прелоадера начать отсчет:

<div id="before-load"></div>
<script>
var preLoader = document.getElementById("before-load");
    isVsiblePreloader = true;
      setTimeout(function () {
          fadePreLoader(preLoader);
      }, 10000);
</script>

и добавить второе наше условие при полной загрузке:

window.onload = function () {
    fadePreLoader(preLoader);
};

В итоге функция все-равно будет выполняться два раза: но в первый раз она скроет прелоадер и присвоит isVisiblePeloader = false;, что предотвратит скрытие прелоадера второй раз.