Почему во время загрузки страницы с помощью лоадера видно саму страницу?

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

1. Загрузка и отображение элементов страницы происходят параллельно. Даже если лоадер отображается первым, другие элементы могут продолжать загружаться и отображаться на странице.

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

3. Если ваш лоадер загружается асинхронно (например, с помощью AJAX-запроса), то страница может продолжать загружаться и отображаться, пока лоадер не будет полностью загружен и отображен.

Относительно мелькания сайта перед появлением лоадера, даже если JavaScript-скрипт стоит первым в списке, есть несколько возможных причин:

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

2. Если на странице есть другие ресурсы (например, стили CSS или изображения), которые также загружаются и применяются перед выполнением JavaScript-скрипта, то страница может отобразиться с их примененными стилями и содержимым до выполнения JavaScript.

3. Возможно, в вашем JavaScript-коде используются анимации или другие изменения визуального отображения страницы, которые происходят с небольшой задержкой, что может приводить к мельканию сайта перед появлением лоадера.

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

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

Если вы хотите добавить классы "overlay__opened" и "flex" к самому HTML элементу, вы можете сделать это в разметке HTML. Затем создайте функцию для остановки и запуска этого элемента. В дальнейшем, вы можете управлять этой функцией при помощи события DOMContentLoaded, выполнить все необходимые действия и в конце отключить лоадер. 

Вот пример кода:

if (!cookie) {
    runCode();
    loaderStop();
} else {
    loaderStop();
}