Когда я использую Windows Performance Timing, мой конец события загрузки равен 0
Итак, я пытаюсь сделать так, чтобы индикатор выполнения отображался на моей странице как ПРЕДЗАГРУЗЧИК. Я не могу процитировать, кажется, правильно понял математику, чтобы индикатор выполнения использовал точные проценты, поэтому я вернулся к использованию установленных таймингов.
Итак, я измерил время загрузки 1 изображения в моем предварительном загрузчике, а затем на основе количества миллисекунд, которые потребовались для загрузки, добавил классы к моей анимации, которые в основном либо замедляли, либо ускоряли.
Извините, если он запутан или не СУХОЙ. Я новичок в JS.
К сожалению, как бы МЕДЛЕННО я ни устанавливал соединение через DevTools, я продолжал получать класс «очень быстро». Итак, я проверил с помощью консоли и получил эти значения, которые не имеют смысла:
perfData.loadEventEnd: 0 perfData.loadEventStart: 1538796857083 LoadTime: -1538796857083
Как это возможно? Что происходит и как я могу исправить?
Я добавил свой сценарий перед концом заголовка и поставил onload = "loadTime ();" в используемом внутри моего прелоадера.
Вот код:
<script>
// Measure Loadtime
var loadTime = function(){
setTimeout(function(){
var perfData = window.performance.timing;
var EstimatedTime = (perfData.loadEventEnd - perfData.navigationStart);
if (EstimatedTime<1400){
$('#prefiller').addClass('fill-vfast')
console.info(perfData.loadEventEnd)
console.info(perfData.navigationStart)
console.info(EstimatedTime)
}else if (EstimatedTime<2100){
$('#prefiller').addClass('fill-fast')
console.info(perfData.loadEventEnd)
console.info(perfData.navigationStart)
console.info(EstimatedTime)
}else if (EstimatedTime<2800){
$('#prefiller').addClass('fill-slow')
console.info(perfData.loadEventEnd)
console.info(perfData.navigationStart)
console.info(EstimatedTime)
}else {
$('#prefiller').addClass('fill-vslow')
console.info(perfData.loadEventEnd)
console.info(perfData.navigationStart)
console.info(EstimatedTime)
}
}); // Executes 10 ms after load has ended
};
</script>
</head>
<body>
<!-- #preloader -->
<div id = "preloader">
<div id = "preloader-logo">
<img src = "/logo.png" onload = "loadTime();">
<div class = "grayscaler" id = "prefiller"><img src = "/logo.png"></div>
</div>
</div>
<!-- /#preloader -->
Сами изображения работают отлично. Достигнутый эффект представляет собой версию логотипа в оттенках серого, которая постепенно заполняется цветом. Я надеялся назначить разные классы на основе предполагаемой скорости загрузки страницы, поскольку каждый класс будет заставлять анимацию CSS иметь разную скорость. Есть какой-либо способ сделать это?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Вы действительно пытаетесь показать прогресс одного изображения (потому что я думаю, что это будет сложно, или вы хотите показать прогресс для чего-то еще? Window.performance.timing отображает информацию, относящуюся к самому документу, а не к конкретному элементу.