подгрузка контента

[guelder]

Всем доброго времени суток.

У меня проблемка небольшая. Делаю страничку, в которой в перспективе будут отображаться примеры верстки. Ничего сложного на первом этапе. Что мы имеем на сегодняшний день можно посмотреть тут:
http://ingolstadt-kosmetik.de/test/js/frame.html
Файлы подгружаются функцией load, но, как я понял, она, подгрузив семантику, считает работу законченной и передает управление функции, указанной как параметр. Проблема в том, что картинки и файлы стилей к тому моменту еще не подгружены, что мешает достойно отобразить информацию. Дергания заметны. Пытался запоминать старые размеры окна и затем менять их на новые, исходя из подгруженных данных, но это затруднительно, так как сначала передаются размеры окна, какое бы оно было бы, если бы файлы стилей еще не были подгружены. Позднее, когда все уже загружено и закешировано, все нормально, но меня это не устраивает. Первое впечатление портит все. Можно ли как-нибудь заставить функцию load передавать управление только тогда, когда подгружаемые данные загружены полностью, со всеми картинками, файлами стилей и другими включениями? Или, может быть, уже существует готовый механизм решения поставленной мною задачи, а я тут велосипед изобретаю. Буду рад, если поделитесь навыками. Заранее спасибо.

[e1f]

Если сильно мешает, можно накрыть область подгрузки, и убрать накрытие после загрузки всех внешний данных ака css и рисунков

[guelder]

Мешает. В принципе, определенные проблемы это решает но не все. Высота блока, в который подгружается контент все еще возвращается без учета разметки в файле стилей. Причем в эксплорере все работает как надо, что удивительно. Хотя тут палка о двух концах. Но не суть. Неужели нигде нет флажка какого-нить, где выставляется критерий окончания загрузки - или только семантика или полностью страница со всем включениями? Было бы полезно.

[B~Vladi]

Вы грузите html, содержащий ссылку на внешний css?!

[guelder]

Дело в том, что у меня уже есть определенный набор сверстанных страничек. Многие классы и идентификаторы у них пересекаются. Я, может быть, не вижу очевидного, но с высоты моих знаний я не знаю, как сделать по-другому. Я просто загружаю полностью html в блок. Со всеми заголовками, определениями и включениями. Нутром чую, что там каша какая-то получается, но все работает, как ни странно. Как вариант, который мне приходит в голову - уникально определить все классы и идентификаторы в каждой сверстанной страничке, забить ихв один css файл и загрузить его где-нить в самом начале. А в подгужаемых файлах оставить только обгрызанный html, в котором будет только блок, содержащий непосредственно верстку. Но это было бы неудобно. Потому что непонятно, сколько у меня появится примеров верстки в дальнейшем. Либо опять же, как вариант, загружать с основной страницей файлы стилей для всех версток. В этом случае они будут закешированы в браузере пользователя с самого начала и дальнейшие проблемы отпадают сами собой. Хотя, с другой стороны, если версток будет несколько десятков или, не дай бог, сотен, зачем пользователю такой объем данных за раз, если он захочет посмотреть, от силы пару-тройку примеров? Хочется найти оптимальный вариант, но, к сожалению, не знаю всех доступных в инструментарии jquery или javascript возможностей.

[B~Vladi]

Да, грузить весь css никак нельзя. Как вариант - грузим html, затем грузим css аяксом. Когда css загружен - создаём style в head и пихаем туда наш css. Когда всё сделали, вставляем html в div с visibility:hidden;. Теперь мы можем точно знать размеры полученного html

ЗЫ: Сам так не делал, но проблем в такой реализации не вижу

[guelder]

B~Vladi,
алгоритм супер, мне нравится. Только я никак не могу понять, как с помощью фреймворка скачать файл стилей. Все выходные проторчал за книжкой, прочитал кучу сообщений на блогах, нашел вариант, как отследить окончание загрузки изображений, но по аналогии не получается, потому что там событие вешается на событие "load" тега "img". Тут такое не прокатывает. И как работать с этим скаченным файлом? Где он сохраняется? Может быть, вопросы слегка наивные, но это то, чего я в данный момент не понимаю. Если в голову приходит какая-нибудь литература на эту тему - было бы тоже неплохо.

[B~Vladi]

Вобщем, как получить css с помощью фреймворка зависит от конкретного фрейворка. Копать в мануалах к нему нужно по слову ajax. Либо вы даёте прямую ссылку на css и получаете код этого файла, либо на файл php с параметрами и в нём уже выводите нужный css через file_get_contents. В ответе получите css-код, который будет хранится в памяти (как и обычные переменные). Далее находим тег head в вашем html через document.documentElement и создаём в нём тег style.
Далее создаём textNode, вставляем в него полученный css-код как данные, т.е. для Gecko используем appendData, а для IE .data. Делаем appendChild в тег style полученную ноду

[B~Vladi]

Ой... мы же в ветке jQuery... Вобщем там есть метод load и ajax... Я сам с ним не сильно знаком... Здесь есть люди, которые по этому вопросу смогут больше сказать.

[guelder]

B~Vladi,
Респектище. Все получилось, на результат не нарадуюсь. Фреймворк у меня jQuery, собственно, поэтому в этой ветке форума и пишу. Спасибо огромное за помощь!