Я пытаюсь сделать простой загрузочный счетчик, который появляется при навигации. Он обнаруживается при использовании события beforeunload при удалении и использует событие load, чтобы снова скрыться, когда это будет сделано.

Проблема в том, что, когда я оставляю страницу в фоновом режиме на моем телефоне, например, на несколько часов, запускается событие «beforeunload» и отображается счетчик. Вероятно, потому что Chrome на Android частично выгружает страницу для экономии памяти. Хотя спиннер не исчезает сам по себе, и я не могу понять, как заставить его исчезнуть снова элегантным способом.

Есть ли другое событие, которое я должен использовать вместо этого?

window.addEventListener("load", function() { topSpinner.classList.add("closed"); }); window.addEventListener("beforeunload", function() { topSpinner.classList.remove("closed"); }); 

Измените список событий загрузки на фокус

Я записал события через Ajax в базу данных. Мои тесты показали, что это не предсказуемо, какие события были вызваны (т.е. при использовании PWA). Здесь есть focus , изменение visibilitychange , resize и beforeunload до beforeunload . Я был удивлен тем, что при включении экрана с активным PWA, иногда beforeunload это единственные события, которые были записаны в базу данных.

Сейчас я использую следующий код, который, кажется, работает без побочных эффектов:

 var visibilityState = 'visible'; window.addEventListener('beforeunload', function(e) { if (visibilityState === 'visible') { loader.show(e); } }); window.addEventListener('focus', loader.hide); window.addEventListener('resize', loader.hide); window.addEventListener('visibilitychange', function(e) { visibilityState = document.visibilityState; if (visibilityState === 'visible') { loader.hide(e); } }); 

Попробуйте сохранить флаг загрузчика через localStorage , поэтому, если страница затем перезагрузится, проверьте флаг еще раз:

Псевдокод ниже:

 $(document).ready(function() { $('#loader').hide(); localStorage.setItem("loader", false); window.addEventListener('beforeunload', showLoader); }); var showLoader = function() { var isShow = localStorage.getItem("loader"); if(!isShow){ $('#loader').show(); localStorage.setItem("loader", true); } }; 
Ахед Кабалан

новый участник этого сайта. Будьте внимательны, спрашивая разъяснения, комментируя и отвечая. Проверьте наш

Правила поведения

,