Гарантированно неблокирующая загрузка

28.01.2011

В теге script атрибут defer для асинхронной загрузки до сих пор поддерживается не всеми браузерами, поэтому если вы хотите чтобы код рекламной строки ни при каких условиях не блокировал загрузку страниц, можете вставить код сразу перед закрывающим тегом body (</body>) и в нужном месте шаблона поставить просто пустой элемент div с идентификатором daos (<div id='daos'></div>).

Тогда последовательность будет такая:

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

Для примера можете посмотреть исходный код этой страницы.

Комментарии

  1. # Бутылк.Ус: 

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

  2. # Rulexec: 

    У тебя TexTile съел ссылку на Даос, точка-запятая в ссылке.

    Ну я тоже обычно на страницу добавляю всякое через onLoad ивент, но если на странице есть какая-нибудь падлокартинка/скрипт, который будет секунд 30 грузится и onLoad наступит, как наконец наступит тайм-аут у той самой картинки.

    А ещё этот .addEventListener не кроссбраузерен, смотри, поддерживается всем, кроме… IE, там свой велосипед писать нужно. Но я где-то видел решение.

  3. # Тормоз: 

    Спасибо, текстильный косяк исправил. А причём здесь события я вообще не понял. Сдаётся мне, ты сам не разобрался о чём конкретно речь.

  4. # Rulexec: 

    Я о ивентах говорю, потому что ты, видимо хочешь/делаешь вставку кода в блок с id ‘daos’, как-нибудь типа:

    document.getElementById(‘daos’).appendChild(adv);

    но такого элемента не будет до тех пор, пока не загрузится весь html-код страницы и не будет готов DOM.

    или defer автоматически означает то, что документ уже будет готов?

  5. # Тормоз: 

    Да, defer автоматически означает именно это. Кроме defer есть ещё async, вот в этом случае дерева может ещё и не быть на момент загрузки.

  6. # Rulexec: 

    А, ну отлично. Разве что будет небольшая проблема с браузерами, где такое не поддерживается.

    Просто js выкинет эксепшн, что нет метода appendChild у null

  7. # Тормоз: 

    Да почему выкинет-то? Если ты ставишь вызов скрипта перед закрытием body, то к моменту его загрузки уже по любому DOM будет. Разве нет?

  8. # Rulexec: 

    Хм, потестил, вроде выходит так.

    Но найдётся 500 человек, которые на твоё «вставляйте перед </body>», вставят в head, в body, перед <body> вообще, или где-нибудь до doctype.

    Ладно, закончили :).

  9. # Тормоз: 

    Ха! Ну так сами себе злобные Буратино :) У меня ведь знаешь как сделано умолчально? Если забыл см. скриншот. Для большинства этого достаточно, а остальные соображать же должны.

  10. # Kichrum: 

    Вот именно о последнем скриншоте: на той странице не сказано, что даже если нам не хочется никакой асинхронной загрузки, необходимо все-равно ставить <div id=‘daos’></div>
    перед скриптом. По крайней мере в Хроме не работает без него.

  11. # Тормоз: 

    Я не знал. А в чём ошибка, почему в Хроме не работает альтернативный путь?

  12. # Igor: 

    Kichrum: необходимо все-равно ставить <div id=‘daos’></div>
    перед скриптом.

    Вот таже самая проблема, стояли скрипты даоса daos-30.Jan.2011 всё работало как положено, обновился на daos-03.Feb.2011 блок рекламы вывода пропал, но я немного почитал, что строчку уже нужно ставить такого типа (<script defer=‘defer’ src=’/daos/JSblock.php’ type=‘text/javascript’></script>), ну поставил и всё ровно в IE8 вывода рекламы не было пока не добавил (<div id=«daos»></div>), после всего рекламный блок появил, но через пару дней увидел, что в режиме совместимости в IE8 и чистом IE7 теряются стили и строчка показываеться без оформления, я думал, что проблема только у меня, немного походил по другим сайтам, где стоит даос и увидел эту же проблему и у других, Вопрос: почему так стало? и как с этим бороться? в младших версиях такого глюка я не наблюдал.

  13. # Тормоз: 

    Я вспомнил, что IE по разному ведёт себя в зависимости от доктайпа и ещё от валидности документа. Когда был железобетонный document.write, это не имело значение, а на операции с DOM влияет. Пока ещё не решил как лучше сделать.

  14. # Geleosan: 

    Поставил Daos, спасибо автору. Будем пробовать.

    Ситуация та же, размещаю код вот так.
    <div id=‘daos’></div>
    <script defer=‘defer’ src=‘http://life-trip.ru/daos/JSblock.php’ type=‘text/javascript’></script>

    Вопрос. А почему загрузка скрипта все равно идет как бы асинхронно? То есть сначала грузится часть страницы, потом появляется скрипт (мозила, IE). В опера все нормально, сначала скрипт, потом все остальное.

  15. # Тормоз: 

    А должно быть как на ваш взгляд?

  16. # Geleosan: 

    Задам вопрос по другому, как сделать не асинхронную загрузку? Чтобы скрипт грузился тогда, когда появляется в браузере то место, где он должен быть. А не через некоторое время, когда почти вся страница уже загрузилась.

  17. # Тормоз: 

    Можно поставить тег script сразу после блока с id=daos и убрать defer. Но какой смысл?

Комментирование этой статьи закрыто.

Интересное Покупки ТехникаРазное Отдых Статьи Строительство Услуги Общество Хобби Культура Советы Уют