Как сначала загрузить методом ajax, а потом лишь вставить в DOM?

Question

[protasovmikhail]

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

Вопрос как мне сначала загрузить, а потом вставить в DOM. Я в js не силен, но мне думается что - загрузить в переменную, а потом присвоить div'у значение этой переменной. Но вот реализовать я это не могу(

Не прошу все написать за меня, только - как загрузить в переменную( может var = .load(url) ) и как заменить ее содержимым содержимое div'a.

Спасибо.

Answer 1

[protasovmikhail]

В общем мне подошел метод .append().

Всем кто задастся этим же вопросом - feo-klunker.blogspot.com/2013/04/css-jquery.html
там я и нашел) вот только скрипты им грузить... пока не получилось)

У кого тоже не получилось так грузить скрипт - В чем может быть причина отказа от работы js скрипта?

Answer 2

[Хазрат Гаджикеримов]

$.ajax({
                url: '/index.php',
                data: {
                       // отправляемые данные типа name: value
                },  
                success: function (data){ 
                      $('div').html(data); 
                }
            });

Comments

[protasovmikhail]

А это не тот же .load, только в профиль??

[protasovmikhail]

Попробую

[protasovmikhail]

к сожалению, ничего не изменилось.

[Хазрат Гаджикеримов]

protasovmikhail: Если данные приходят с сервера (т.е данные ты получил), то тут не причем ajax, тут дело или в браузере либо в чем то еще, лучше всего кусок кода показать.

[protasovmikhail]

Хазрат Гаджикеримов: Какой кусок ? Css? Js? Html? Php?

[Хазрат Гаджикеримов]

protasovmikhail: Js

[protasovmikhail]

это с Вашим предложением, ранее просто $("#content").load("ajax/login");

[protasovmikhail]

$(document).ready(function(){
$(".debug_login_button_not_push").click(function(){
$(".debug_login_button_not_push").removeClass("debug_login_button_not_push").addClass("debug_login_button_push");
$("#debug_login_button_text").css("display", "none");
$.ajax({
url: 'ajax/login',
success: function (data){
$('#content').html(data);
}
});
})
});

Answer 3

[Viktor Vsk]

У Вас не загрузились стили, а код уже выполняется?
Тогда самый простой вариант, весь код запускать в

$(document).ready(function(){ $("#div").load('/url'); });

Comments

[protasovmikhail]

Чуть выше в комментах, исходный код js

[Viktor Vsk]

protasovmikhail: Тогда о каких классах идет речь? Если все выполняется в онреди, то все стили страницы уже загружены, если вы из каких-то других источников непонятно как их не грузите.
Если что-то более специфическое - то делайте уже jsfiddle.
P.S.
Вставлять в переменную - это бредовейший вариант, конечно, но какие с этим могли возникнуть сложности?
$('#content').html(data);
Меняете на
window.myResponse = data

[protasovmikhail]

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

[protasovmikhail]

в инспекторе(firefox), стиль вообще вроде как не грузиться, хотя применяться хоть и с опозданием

[Viktor Vsk]

protasovmikhail: То есть, вы грузите полноценную веб-страницу?
Так так и напишите, что у вас не подгружаются стили загружаемой страницы, а не основной.
Даже если вы сохраните ее "в переменную", то загрузка внешних файлов начнется только тогда, когда вставите в DOM этот "html-текст"

Решение у вас какое-то дико костыльное. Если вы грузите свое собственное приложение - то просто ВСЕ стили у вас УЖЕ должны быть загружены. И они не должны передаваться ajax-ом.

Если там какие-то специфические виджеты, то стили и код можно инлайнить.

Как дикие костыли, можно просто отображать этот див (через show\hide после, например, 1-2 секунд). Или же, что еще костыльнее, перед вставкой в дом - вырезать все link и скрипт, добавлять их в хэд, и когда все загрузятся уже вставлять контент. Но это тоже еще большая бредятина.

Если у вас что-то уж очень сложное и специфичное, то есть https://developer.mozilla.org/en/docs/Web/API/Docu...

Но если у вас сложности со "вставить в перменную" и рассказать, какие стили не грузятся - то будет тяжело

[protasovmikhail]

Виктор Выскребенцев: почему костыльные? как по мне то логика проста: в данном примере грузится
заглушка мол сайт не доступен по тех. прич. и кнопочка) по клику подгружается форма ввода для администрации. Мы получаем минимум кб информации для клиентов, а админ может и подождать мгновение)

[protasovmikhail]

Виктор Выскребенцев: и нет, не полноценную) только содержимое для дива + css + js

[Viktor Vsk]

protasovmikhail: страница с html, head, link, script - уже совершенно полноценна.
Ваше решение просто кишит костылями.
Самый простой вариант - инлайнить стили.
Если вы загрузите строку респонса в переменную, ничего не изменится - стили начнут грузиться только после того, как добавите элемент в DOM
Задача интересная, но отчасти бессмысленная. documentFragment может не хватить. Тогда Shadow Dom habrahabr.ru/post/180377

[Viktor Vsk]

protasovmikhail: www.phpied.com/when-is-a-stylesheet-really-loaded ну и вот еще пища для размышления над костылями)

Answer 4

[Антон]

При таком варианте попробуйте iframe, либо же через load загружать только нужный html код, а стили загружать в исходном документе, либо же использовать inline стили.

Comments

[protasovmikhail]

Нет нет, исключено, приложение по запросу, подготавливая ответ, кладет в него и разметку и линки к стилям и скриптам

Answer 5

[Vladislav Churakov]

Это называется FOUC (Flash Of Unstyled Content), решается любым методом, из общих (пишу для понимания принципов):
1. В самом html файле в head прописать style: * { visibility: hidden; }, т.е. все скрываем, а в самом css файле, пишем * { visibility: visible; }, тогда все элементы после загрузки html будут невидимы, но как только css загрузится и "заведется" все встанет на свои места
2. у body пишем класс body.no-css, аналогично пишем в head прописать style: body.no-css { display: none; } , потом по факту загрузки DOM снять с body класс no-css

ИМХО, подгружать контент страницы после загрузки DOM ajax запросом - это увеличение времени ожидания страницы, что зло. Динамически подгружать второстепенные элементы, чтобы ускорить время доступности основного контента со стилями - хорошо.

Comments

[protasovmikhail]

Подгружать по клику то что потребуется далеко не всем, хорошо по-моему)

[Vladislav Churakov]

protasovmikhail: По клику? я про клик ни слова не написал )

[protasovmikhail]

Vladislav Churakov: ИМХО, подгружать контент страницы после загрузки DOM ajax запросом - это увеличение времени ожидания страницы, что зло.

Это точно написали Вы) контент не подгружается после загрузки дом, только после клика)