Ленивая загрузка скрипта addthis? (или ленивая загрузка внешнего содержимого js в зависимости от уже запущенных событий)

Я хочу иметь addthis виджет доступен для моих пользователей, но я хочу лениво загрузить его, чтобы моя страница загружалась как можно быстрее. Однако, попробовав его через тег скрипта, а затем через мой метод ленивой загрузки, он работает только через тег скрипта. В запутанном коде я вижу что-то, что выглядит так, как будто оно зависит от события DOMContentLoaded (по крайней мере, для firefox).

поскольку событие DOMContentLoaded уже запущено, виджет не правильно. Что делать?

Я мог бы просто использовать тег script (медленнее)... или я могу запустить (в кросс-браузере) событие DOMContentLoaded(или эквивалентное)? У меня такое чувство, что это может быть невозможно b/c я считаю, что (например, jQuery) существует несколько тестов события content ready, и поэтому должно произойти несколько смоделированных событий.

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

Edit: Поскольку 1-й ответ на вопрос, казалось, пропустил суть моей проблемы, я хотел прояснить ситуацию.

речь идет о конкретной проблеме. Я не ищу еще один сценарий ленивой загрузки или проверить, загружены ли некоторые зависимости скрипт. конкретно эта проблема имеет дело с

  1. внешние виджеты, которые вы не контролировать и может или не может запутаться
  2. задерживает груз внешние виджеты, пока они необходимы или, по крайней мере, пока существенно после всего остального был загружен, включая другие отложенные элементы
  3. b / c как виджет был написан, исключает существующий, типичный ленивый погрузка парадигмы

в то время как это эзотерично, я видел, как это происходит с несколькими виджетами, где разработчики виджетов предполагают, что вы просто готовы бросить другой тег скрипта в нижней части страницы. Я ищу, чтобы сохранить эти 500-1000 ms**, хотя многочисленные исследования yahoo, google и amazon показывают, что это важно для вашего пользователя.

**мое тестирование с hammerhead и личный опыт показывает, что это будет моя экономия в этом случай.

9
javascript javascript-events optimization widget

3 ответов

самое простое решение-установить параметр domready до 1 при встраивании скрипта addthis на вашу страницу. Вот пример:

<script type="text/javascript" 
src="http://s7.addthis.com/js/250/addthis_widget.js#username=addthis&domready=1">
</script>

Я тестировал его на IE, Firefox, Chrome и Safari, и все работало нормально. Более подробная информация о параметрах конфигурации addthis доступна здесь.

12

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

после прочтения этой в должности о том, как большинство текущих библиотек js реализуют тесты для события, загруженного dom. Я провел некоторое время с запутанным кодом, и мне удалось определить, что addthis использует комбинацию упомянутого метода doscroll, таймеров и события DOMContentLoaded для различных браузеров. Поскольку только те браузеры, которые зависят от события DOMContentloaded, понадобятся в любом случае следующий код:

if( document.createEvent ) {
 var evt = document.createEvent("MutationEvents"); 
 evt.initMutationEvent("DOMContentLoaded", true, true, document, "", "", "", 0); 
 document.dispatchEvent(evt);
}

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

8

Edit: если цель состоит в том, чтобы сначала загрузить другой contetn, попробуйте поместить <script> теги в нижней части страницы. Он все равно сможет поймать DOMContentLoaded и содержимое, которое приходит раньше, будет загружено перед скриптом.

Оригинал:

в дополнение к загрузке на DOMContentLoaded, вы можете загрузить его, если определенный var установлен true. например,

var isDOMContentLoaded = false;

document.addEventListener("DOMContentLoaded",function() { isDOMContentLoaded = true; }, false);

затем добавить в другой файл скрипта

if (isDOMContentLoaded) loadThisScript();

изменить в ответ на комментарии:

загрузите сценарий и запустите функцию, которую запускает прослушиватель DOMContentLoaded. (читать скрипт, если вы не уверены, какая функция вызывается ).

например 

var timerID;
var iteration=0;

function checkAndLoad() {
    if (typeof loadThisScript != "undefined") {
        clearInterval(timerID);
        loadThisScript();
    }
    iteration++;
    if (iteration > 59) clearInterval(timerID);
}

var extScript = document.createElement("script");
extScript.setAttribute("src",scriptSrcHere);
document.head.appendChild(extScript);

timerID = setInterval(checkAndLoad,1000);

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

1