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

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

9 голосов
/ 03 июня 2009

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

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

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

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

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

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

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

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

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

Ответы [ 3 ]

12 голосов
/ 15 июня 2010

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

8 голосов
/ 03 июня 2009

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

После прочтения этого поста о том, как большинство современных библиотек 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 голос
/ 03 июня 2009

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

...