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

StackOverflow https://stackoverflow.com/questions/942921

Вопрос

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

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

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

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

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

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

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

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

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

Это было полезно?

Решение 2

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

После прочтения этого Публикация о том, как большинство современных библиотек 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-контента вместо использования статических тегов скрипта, таким образом экономя время, на которое я надеялся.:)

Другие советы

Самое простое решение - установить параметр дом готов к 1 при встраивании добавьте этот скрипт на свою страницу.Вот такой пример:

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

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

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

Оригинал:

в дополнение к загрузке в DOMContentLoaded, вы могли бы заставить его загрузиться, если для определенного параметра установлено значение 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 секунд проверять, доступна ли нужная вам функция, и, если да, запускать ее

AddThis содержит раздел о как асинхронно загружать свои инструменты.

Текущее "лучшее" решение:

<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=[YOUR PROFILE ID]" async="async"></script>
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top