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

Question

[Даник Грачёв]

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

Answer 1

[Василий Останин]

Поставить на корневой элемент окна style="display:none;" Происходит это из-за отложенной загрузки css файлов.

Вариант 2: Грузить содержимое AJAX'ом и вставлять в код страницы то первому клику.

UPD
Вариант 3: Вероятно у html содержимого, который грузит этот скрипт, есть class или id, попробуйте скрыть его в своих стилях

Comments

[Даник Грачёв]

игрался долго со стилями, пытался скрыть его, и давал visibility только при клике, но все-равно при обновлении на каких-то 20млсек он видимый.
сейчас написал простенький скрипт. Сначала id-елементу даю style="display:none;", а при клике меняю на block
всё ок, но работает только в хроме.
спасибо за все варианты

Answer 2

[Alexander]

Загружать по технологии ajax более выгодно, ибо если окно скрыто, значит информация маловажна, или так
var template = '<div class="BOX">Text</div>';

Использовать js шаблон и вставлять его .append()

Answer 3

[Артур Смирнов]

Существует несколько способов скрыть блок на странице. Главное - пропишите эти стили в CSS, чтобы они применялись прямо при рендеринге блока, либо, если загружаете содержимое динамически, применяйте стиль к блоку до его вставки в DOM.
display: none;
margin-left: -100%;