Что делать, если прелоадер страницы крутится слишком долго

Прелоадер (preloader), или предзагрузчик - это лёгкая анимация или графическое изображение, которое информирует посетителя о процессе загрузки основного проекта и занимает его внимание на это время.

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

Таким образом получается, что если какой-то ресурс загружается слишком долго, то всё это время будет крутиться прелоадер. Обычно это во многом зависит от скорости интернета и настроек кеширования.

Если какой-то ресурс не должен учитываться в событии window.load, то он должен загружаться только после наступления этого события.

Как влияет на прелоадер пиксель фейсбука

У некоторых пользователей по какой-то причине блокируется пиксель фейсбука (запрещённая в РФ Meta). Это может быть из-за блокировок со стороны провайдера, либо AdBlock не даёт загрузить. Но факт в том, что пиксель пытается загрузиться секунд 40 и в итоге не загружается. И если у вас нет никакого прелоадера, то вы этого даже не заметите.

Код всех пикселей устроен так, что они влияют на наступление события window.load. Т.е. браузер ожидает загрузку пикселя, и не даёт событию window.load наступить, пока пиксель не загружен.

Тем временем прелоадер будет крутиться пока браузер не поймёт, что загрузка пикселя — плохая идея. Загрузка скрипта пикселя заверится с ошибкой по таймауту, и тогда наступит долгожданный window.load.

Если вы работате на платформе GetCourse, то мало будет убрать/изменить ваш скрипт пикселя, который прописан в Настройках аккаунта, потому что у самого геткурса есть свой пиксель, до которого у нас по сути нет доступа 🥲

Чтобы справится с этой проблемой я придумал небольшой хак, который переписывает скрипты пикселей, до того, как они успеют сработать. Таким образом, они выполняются после загрузки страницы и поэтому перестают влиять на наступление события window.load.

📎 Получился такой скрипт, который нужно добавлять в Настройки аккаунта в самое начало поля HEAD:

<script>
(()=>{
    new MutationObserver((m) => {
      for (let mutation of m) {
        if (mutation.type === 'childList') {
          let addedNodes = mutation.addedNodes;
          for (let i = 0; i < addedNodes.length; i++) {
            let node = addedNodes[i];
            if (node.nodeName === 'SCRIPT' && /([,;])?(\w).async=!0/.test(node.innerHTML) && /fbevents\.js/.test(node.innerHTML)) {
              let newNode = document.createElement('script');
              newNode.innerHTML = node.innerHTML.replace(/([,;])?(\w).async=!0/, '$1$2.defer=true$1$2.async=true');
              node.parentNode.replaceChild(newNode, node);
            }
          }
        }
      }
    }).observe(document, { childList: true, subtree: true });
})();
</script>

Dmitry Space

Пн 3 Апреля 17:43

Для того чтобы оставить комментарий —
авторизуйтесь

бесплатные_ништяки

Связанные статьи

Доп. скрипты и стили

support@getscript.ru

Политика обработки данных

Оферта