Устанавливает время для выцветания экрана PreLoad с использованием jQuery

Question

Мне нужна помощь. Я попытался создать специальный экран предварительной загрузки, например this. Но в этом уроке автор исчезает из своего накладываемого элемента через три секунды (подделывает его). Я знаю, что исчезать из экрана предварительной нагрузки после загрузки страницы, мне нужно использовать $(window).load():

$(window).load(function(){ 
     // PAGE IS FULLY LOADED 
     // FADE OUT YOUR OVERLAYING DIV 
}); 

Но дело в том, мне нужно загрузке прогресса. На самом деле, я хочу, чтобы он длился как минимум 3 секунды, и, если время загрузки составляет 4 секунды, оно длится 4 секунды. Но если время загрузки меньше 3 секунд, оно все равно длится 3 секунды.

У меня есть логотип, который нарисован с использованием stroke-dashoffset и stroke-dasharray, поэтому мне нужен код, чтобы дать ему достаточно времени, чтобы нарисовать его.

Плюс, я хотел бы иметь счетчик, чтобы получить оставшееся время до полной загрузки. Я собираюсь преобразовать его в процентную нагрузку.

Может ли кто-нибудь помочь мне сделать это, пожалуйста?

Answer 1

Оставшееся время загрузки страницы непознаваемо. Перегрузка сети, ошибки, скорость процессора (сервер и клиент), скорость GPU и многие другие факторы, не видимые клиенту, влияют на время загрузки. У вас недостаточно информации, чтобы знать, как долго будут выполняться запросы (запросы) и страницы.

По этой части вашего вопроса:

На самом деле, я хочу, чтобы это длилось не менее 3 секунд и, если время загрузки 4 секунд, например, она длится 4 секунды. Но если время загрузки менее 3 секунд, оно все равно длится 3 секунды.

Затем просто используйте setTimeout с 3000 миллисекундами, чтобы погасить экран загрузки. Используйте пару переменных для отслеживания времени простоя и загрузки страницы:

var pageLoaded = false; 
var timeElapsed = false; 

function fadeOutLoadScreen() { 
    if(timeElapsed && pageLoaded) { 
     // do fadeOut stuff here 
    } 
} 

setTimeout(function(){ 
    timeElapsed = true; 
    fadeOutLoadScreen(); 
}, 3000); 

$(window).load(function(){ 
    pageLoaded = true; 
    fadeOutLoadScreen(); 
});