Определите, что браузер загружает новую страницу, чтобы подчеркнуть, что что-то происходит

Question

Во время UX-тестирования моих различных веб-сайтов я часто замечал, что людям трудно определить, действительно ли их "щелчки" что-то делают.

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

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

Доступен ли этот статус "загрузки новой страницы" в JS? Можем ли мы использовать его для такого рода вещей?Существуют ли какие-либо библиотеки, созданные для этого?

Редактировать: многие, кажется, путают мой вопрос, который понятен.Итак, вот попытка прояснить ситуацию.

Находясь на странице A, я хочу обнаружить, что пользователь запросил страницу B и ожидает ответа сервера.Я хотел бы анимировать страницу A, ожидая ответа сервера и сначала нарисовав страницу B.

Answer 1

доступно много библиотек на основе вашего языка реализации.

для базового примера, проверьте W3schools

Answer 2

Я предполагаю, что только теги <a> перенаправляют на страницу B, так что вы можете поместить слушателя во все эти теги <a>, которые показывают анимацию, и скрыть остальную часть страницы, изменяя состояние «стиля видимости» с помощью object.style.visibility = "visible|hidden|collapse|initial|inherit" до перенаправления на B.

Например:

var linkList = document.getElementsByTagName("a"); // don't use it for all <a> tags. 
                                                   // Only for those that redirects to B

for(let i=0; i<linkList.length; i++){
    linkList[i].addEventListener("click", function(e){ 
        e.preventDefault();
        var href = this.getAttribute('href');
        var target = this.getAttribute('target') || "_self";
        // show loading animation in here
        window.open(href,target);
    },false);
}

Answer 3

Вы можете использовать jquery. https://learn.jquery.com/using-jquery-core/document-ready/

Вы можете показать некоторое изображение перед загрузкой содержимого и скрыть его после загрузки документа.