Я пытаюсь показать спиннер на своей странице, как только пользователь нажимает любую ссылку на моем веб-сайте, и скрывать счетчик, как только новая страница полностью загрузится.
Чтобы сделать это, я попытался использоватьJQuery и Javascript. Одно решение только с jQuery, а другое решение с jQuery и JavaScript.
Решение 1 (jQuery):
$(window).load(function() {
$(".loading").fadeOut("slow");
}).on('beforeunload', function() {
$(".loading").fadeIn("slow");
});
Решение 2 (JavaScript / jQuery):
window.addEventListener('beforeunload', (event) => {
console.log("now unloading", new Date());
var spinner = document.querySelector(".loading");
$(spinner).show();
});
window.addEventListener('load', (event) => {
console.log("now loading", new Date());
var spinner = document.querySelector(".loading");
$(spinner).hide();
});
Теперь оба эти решения прекрасно работают на Chrome.
Но в Safari на Mac и в нашем приложении Cordova для iOS ни то, ни другое не работает, а это означает, что при нажатии на ссылку на странице я не сразу вижу счетчик. Спиннер появляется только на долю секунды сразу после полной загрузки страницы и исчезает до того, как новая страница даже начинает загружаться. Однако я получаю сообщение журнала консоли, как только я щелкаю ссылку в Safari, поэтому ведение журнала консоли ведет себя как ожидалось. Кажется, что проблема в добавлении элементов в DOM.
Любая помощь будет принята.
Редактировать 1: чтобы упростить копирование проблемы, я написал этот HTML-код, который работает на Chrome, но не Safari.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
window.addEventListener('beforeunload', (event) => {
console.log("Now unloading", new Date());
var spinner = document.querySelector(".loading");
spinner.style.display = "block";
});
</script>
</head>
<body>
<a href="https://www.google.com">This should take you to Google</a>
<img src="spinner.jpeg" class="loading" style="display:none">
</body>
</html>