Практический JS: «отложенная» загрузка

[@vini]

за переводы и само изложение спасибо, особенно за Safari

[@zhuravl]

В mootools, например, есть такое событие: OnDomReady

[@blv]

Спасибо за перевод и за красивое оформление, но тема не очень актуальна, так как во всех библиотеках есть готовое решение, например, в jQuery есть конструкция $(document).ready.

[@blv]

Добавлю, что использование библиотеки сделает скрипт переносимым - он будет работать на практически на всех браузерах.

[@hexes]

а вот у меня некоторые проблемы возникли с $(document).ready, допускаю что я корявый, но...
$('div#content').css({ height : $('div#right').css('height') });
в ИЕ не работает, нет говорит такоого элемента... :(

[@blv]

То есть в других браузерах работает? Полный код в личку.

[@hexes]

блин... я тупой! =)
Не умею пользоваться хабром! Моя ася 107388676

[@zencd]

cпасибо! увлекательная статья
__________

не понимаю почему для IE-специфичный код обёрнут в cc-конструкцию, вместо использования проверки юзер агента, ведь остальные браузеры не понимают все эти директивы "спрятанные" в комментариях и следующий код выполнится на всех браузерах, что хоть и не страшно, но как-то некошерно:

/*@cc_on @*/
/*@if (@_win32)
document.write("");
/*@end @*/

разве не так?

P.S. всё-же JS как он есть это ... нечто совершенно особенное ;-)

[@gribozavr]

/*@if (@_win32) <-- вот тут не закрыт комментарий, и все барузеры, соответствующие спецификации, будут считать document.write коммнтарием.

[@trinko]

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

[@djem]

Отложенная загрузка, мне кажется, нужна далеко не в каждом проекте. Там где она необходима - нужно давать понять пользователям готова ли страница к работе или нет. Думаю, "крутящий момент" с надписью Loading и "disable" кнопок пока виден этот "крутящий момент".

[@caston]

При прочих равных согласен с примечанием автора и использовал бы

...
<script type="text/javascript">
// <![CDATA[
   init();
// ]]>
</script>
</body>
...

Такое решение, например, на странице проекта script.aculo.us.

[@sphere]

Что насчёт такого:
var domReadyI = window.setInterval(function(){
if(document.getElementsByTagName('body')[0])
{
window.clearInterval(domReadyI);
window.callEvent('domready');
}
}, 200);

p.s. подскажите, возможно ли на хабре подсвечивать код?

[@sunnybear]

проверил такой вариант — заработало везде. Может быть, стоит ориентироваться и на него, в литературе не встречал.

как видно из этой статьи, можно :) только через задницу (как и некоторая часть вещей на Хабре, взять те же комментарии). Стоит использовать тег <font color="...">

[@hlomzik]

=)
обсуждаются разные вещи, и в решении по ссылке есть одна очень большая проблема - onload, которые выполняется только после загрузки всех ресурсов.
решение же данной статьи помогает обойти эту проблему.

[@bolk]

Просто посмотрите как это сделано в jquery, там же есть вариант для IE

[@serginho]

А чем плох вариант написать в самом конце страницы такой код? Сработает ведь.

.......

init();

[@gro]

Присутствие этого атрибута указывает IE, что загрузку скрипта нужно отложить до тех пор, пока не загрузится DOM

Ну как раз загрузка будет идти параллельно. defer нужен как раз для того, чтобы браузер при отрисовке документа не ждал загрузки внешнего сценария. Исполнение да, будет после.

[@gro]

А, пардон, старую тему вытащил )

[@KTIF]

Интересно много сайтов так программирует.

[@hellroy]

на 21 строке полного решения document.write("....") — нужно писать в одну строчку. Иначе ИЕ выдает ошибку и ничего не работает. Просто, будьте внимательны=)

[@sunnybear]

Спасибо, перенес в одну строку

[@vlaimir]

Написано хорошо, только непонятно как сделать новичку.

У меня есть скрипт (предоставлен сторонним сайтом), он содержит в себе запрос на сторонний сайт для получения списка книг по моему ключевому слову. Скрипт содержит в себе document.write и вызывается в середине страницы, чем блокирует загрузку остальной части.

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

И еще читал, что нужно заменить document.write на innerHTML. Как?

[@sunnybear]

хмм, видимо, решение настолько тривиальное, что о нем просто один абзац

«Если вам не удается избежать вызовов document.write любыми путями помещайте их в самый низ документа. Возможно, стоит рассмотреть вариант, когда после загрузки страницы блок с контекстной рекламой перемещается в необходимое место, а все это время он скрыт где-нибудь в подвале документа и не влияет на скорость загрузки основного содержания.»

webo.in/articles/habrahabr/44-unobtrusive-advertisements-basics/

<div id='initial_location_of_something' style='display:none'>
.. здесь должен быть расположен информер / реклама / счетчик ...
</div>
...
<div id='to_move_somewhere' style='display:none'>
  ... здесь идет код вызова внешнего скрипта, script src='...' ...
</div>
<script type='text/javascript'>
  document.getElementById('initial_location_of_something').innerHTML =
    document.getElementById('to_move_somewhere').innerHTML;
  document.getElementById('initial_location_of_something').style='block';
</script>

Собственно, эта логика уже добавлена в Web Optimizer
code.google.com/p/web-optimizator/
там только небольшой набор информеров, которые нужно «двигать»

[@vlaimir]

Благодарю, сработало.

sunnybear, вам бы написать книгу для чайников.
Тоже самое, что в книге «Разгони свой сайт», только по простому.

[@sunnybear]

а смысл? дохода с книги никакого, а писать «быдло-литературу» я не хочу :)

Хотя может быть, книжка «Реактивные веб-сайты» больше понравится, там больше практических примеров. На днях должны выложить первую версию.
speedupyourwebsite.ru/books/reactive-websites/

[@cinic]

А меня лично интересует как после загрузки DOM, добавить в head ссылку на внешний скрип (с этим я разобрался) и как в определённый див добавить скрипт, который будет вызывать некую функцию, которая определена в том скрипте, который я добавил в head раздел после загрузки DOM