Как большие сайты предотвращают отображение круга загрузки на вкладках? - PullRequest
0 голосов
/ 25 февраля 2020

Ладно, я не знаю, как вам это объяснить. Это может быть просто мой inte rnet, или, возможно, мой сайт работает медленнее, или у них действительно есть метод для этого.

Если вы посетите Facebook, Reddit, Youtube, Twitter, и если вы нажмете на ссылки или какие-либо действия на этих веб-сайтах, URL-адрес изменится, но на вкладке браузера не отобразится круг загрузки.

Как они это делают?

Я почти уверен, что мой сайт работает быстро и иногда загружается даже быстрее, чем крупные сайты, но мой показывает круг загрузки на вкладке браузера.

1 Ответ

0 голосов
/ 25 февраля 2020

Хорошо, так что я нашел ответ. Вот техника для изменения URL без перезагрузки страницы.

Обновление адресной строки с новым URL без ha sh или перезагрузка страницы

Как изменить URL-адрес, не перезагружая страницу?

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

Редактировать: В настоящее время я работаю над этой функцией для своего сайта. Техника заключается в использовании ajax для загрузки контента на основе URL. Я буду обновлять эту тему больше, когда обновляю свой сайт с помощью этой функции.

Редактировать 2: Черт, вы, вероятно, столкнетесь с той же проблемой, с которой я столкнулся, пытаясь обнаружить изменение URL-адреса без использования onhashchange. Если да, то здесь вы go:

Как обнаружить изменение URL в JavaScript

Это буквально заняло у меня 4 часа, чтобы выяснить это ... ...

Редактировать 3: Теперь я включил эту функцию на своем сайте. Вы можете проверить это в

Grandweb

Это довольно просто, но много работы по добавлению контента, полученного после ajax. Итак, вот процесс:

Я использую pushState (); изменить URL без перезагрузки страницы.

    var url = $(this).attr('href');
    var split_url = url.split('/');
    var new_url = url.replace('https://grandweb.net/','');
    window.history.pushState("object or string", "Title", "/write");

Использование mouseup было плохой идеей, и я передумал. Затем я должен вызвать первую функцию, используя mouseup, чтобы получить содержимое через ajax, а затем прослушать последующую функцию onpopstate () для следующих, потому что некоторые действия мыши, такие как Mouse 4 или Mouse 5 привязаны к кнопке браузера «Назад» и «Вперед» и не запускаются с помощью «mouseup».

    $(window).on('mouseup', function(evt) {
          get_content();
    }

    window.onpopstate = function(event) {
          get_content();
    }

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

Вместо этого я использую якорные теги / ссылки, чтобы вызвать первую функцию для получения содержимого .

пример:

<a class="dynamic_btn" href="website.com/post">Home</a>

затем

$(document).on('click','.dynamic_btn',function(e){
    e.preventDefault();
    get_content();
});

Возможно использование onhashchange, если у вас есть хэши на вашем URL. Я не использую хэши в своем URL, поэтому в моем случае использование onhashchange бесполезно, если я ничего не знаю.

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

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

Наблюдая за Facebook, я узнал, что они не реализуют эту технику во всех своих ссылках / функциях. Это имеет смысл, потому что это сложнее поддерживать, особенно потому, что большая часть работы здесь выполняется на стороне клиента. Это очень приятно, потому что страница не загружается.

Я реализовал это на нескольких «важных» функциях моего сайта, таких как просмотр постов и возврат на домашнюю страницу. Я могу реализовать это на всем сайте, но я все еще решаю это. Вот и все, большое спасибо за чтение inte rnet Незнакомец.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...