Задержка загрузки стороннего javascript

Question

Есть ли способ замедлить загрузку сторонних файлов JavaScript до тех пор, пока остальная часть страницы не закончит загрузку?

Answer 1

Вы можете прикрепить к событию onload на странице, и после этого вы можете динамически вставлять ссылки на файлы.

Например:

function loaded(){ 
    var el = document.createElement("script"); 
    el.src = "somefile.js"; 
    el.type="text/javascript"; 
    document.getElementsByTagName("head")[0].appendChild(el); 
} 

Answer 2

Один простой способ - загрузить их в конце страницы html.

Если вы хотите, чтобы первое содержимое загружалось даже с изображениями, а также получите проблемы с перекрестным браузером, сглаженные для загрузки, библиотека jQuery упрощает работу с $(window).load() и $.getScript().

$(window).load(function() { 
    $.getScript('your_3rd_party-script.js'); 
}); 

jQuery не является ответом на все вопросы, но он дает некоторые приятные абстракции. Например, вы получите автоматический кеш-кеш IE (если хотите), и вам не придется беспокоиться о специфических для браузера вопросах непосредственных подходов к DOM-манипуляциям.

Answer 3

Я должен был сделать это для моего собственного сайта, и я документально его здесь:
http://tech.bluesmoon.info/2010/01/handling-documentwrite-in-dynamic.html

Итак, у вас есть следующие типы сторонних скриптов на сделка с:

1. Те, кто хорошо играет со страницей, либо не манипулируют DOM вообще, создают либо собственные узлы DOM, либо вы можете передать идентификатор узла DOM, в котором будет находиться весь его контент, и ждет, пока этот узел DOM не появится в DOM.

   Вам не нужно беспокоиться об этих сценариях. Вы можете безопасно загружать их асинхронно или загружать их после пожара onload или DOMContentReady. Я лично предпочитаю загружать их асинхронно.

2. Те, кто используют document.write, чтобы добавить контент к странице. Эти сценарии раздражают вас, но вы справляетесь с ними с помощью псевдонимов document.write на функцию, которая присоединяется к свойству innerHTML конкретного DIV. В моей статье говорится об этом.

3. Те, кто абсолютно должен находиться на странице перед пожелтением огней, обычно являются сценариями, которые измеряют время, которое требуется для перезагрузки. Вам будет предложено загрузить эти скрипты с помощью обычного узла сценария, однако подумайте, что сценарий, который измеряет onload, на самом деле не является тем, что задерживает загрузку. По этой причине я бы сказал, загрузив такие скрипты асинхронно, но поставьте асинхронный загрузчик в верхней части страницы (в разделе HEAD). Это дает возможность загружать до перезарядки.

Также обратите внимание на один нюанс, асинхронно добавлены сценарии будут блокировать OnLoad, если они были добавлены к DOM, прежде чем OnLoad обожженного, однако они не будут блокировать любое другое содержимое от нагрузки.

Answer 4

Да, JQuery имеет готовый способ справиться с этим: http://www.learningjquery.com/2006/09/introducing-document-ready

Answer 5

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

<script src="script.js" type="text/javascript" defer="defer"></script>