Preguiçoso carregar o script addthis? (Ou preguiçosos carregamento js externos conteúdo depende de eventos já demitido)

Question

Eu quero ter a addthis Widget disponível para os meus usuários, mas eu quero carga lenta com que meus página carrega mais rapidamente possível. No entanto, depois de tentar por meio de uma tag script e, em seguida, através do meu método de carregamento lento, parece único trabalho através da tag script. No código ofuscado, eu vejo algo que parece que é dependente do evento DOMContentLoaded (pelo menos para Firefox).

Uma vez que o evento DOMContentLoaded já demitido, o widget não processar corretamente. O que fazer?

Eu poderia usar apenas uma marca de script (mais lento) ... ou eu poderia fogo (de uma forma cross browser) o DOMContentLoaded (ou equivalente) do evento? Eu tenho um sentimento que este pode não ser possível porque acredito que (como jQuery), existem vários testes do evento pronto conteúdo, e assim vários eventos simulados teria de ocorrer.

No entanto, este é um problema interessante porque eu vi um par de widgets agora assumir que você está incluindo seu material através de tags de script estáticos. Seria bom se eles escreveram código que foi mais útil para desenvolvedores preocupados com a velocidade, mas até então, há uma em torno do trabalho? E / ou algum de minhas suposições errado?

Editar: Porque a primeira resposta para a pergunta parecia perder o ponto do meu problema, eu queria esclarecer a situação.

Trata-se de um problema específico. Eu não estou à procura de mais um script de carregamento preguiçoso ou verificar se algumas dependências são roteiro carregado. Especificamente este problema lida com

1. Widgets externos que não fazer de controlar e pode ou não pode ser ofuscado
2. atrasar a carga do Widgets externos até que eles são necessárias ou, pelo menos, até substancialmente depois de tudo foi carregado incluindo outros elementos diferidos
3. b / c do quão o widget foi escrito, se opõe existente, carregamento típico preguiçoso paradigmas

Embora seja esotérica, eu já vi isso acontecer com um par de widgets - onde os programadores de widgets assumem que você está apenas disposto a jogar em outra marca de script na parte inferior da página. Eu estou olhando para salvar essas 500-1000 ms ** embora como numerosos estudos por Yahoo, Google e Amazon mostrá-la a ser importante para a experiência do seu usuário.

** Meu teste com martelo e da experiência pessoal indica que esta será a minha poupança neste caso.

Answer 1

Este código resolve o problema e poupa o tempo de carregamento que eu estava procurando.

Depois de ler este pós sobre js como mais atuais bibliotecas implementar testes para um dom carregado evento. Eu passei algum tempo com o código ofuscado, e eu era capaz de determinar que addthis usa uma combinação do método mencionado doscroll, temporizadores, eo evento DOMContentLoaded para vários navegadores. Desde apenas os navegadores dependente do evento DOMContentLoaded seria necessário o seguinte código de qualquer maneira:

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

eo resto depende de temporizadores de testes para a existência de certas propriedades, eu só tinha para acomodar este um caso para ser capaz de carregar preguiçoso este conteúdo JS externo em vez de usar as tags de script estático, poupando assim o tempo que eu estava esperando para. :)

Answer 2

A solução mais simples é parâmetro set domready a 1 ao incorporar addthis script em sua página. Aqui está um exemplo:

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

Eu testei no IE, Firefox, Chrome e Safari, e tudo funcionou bem. Mais informações sobre AddThis parâmetros de configuração está disponível aqui .

Answer 3

Edit: Se o objetivo é simplesmente ter o seu outra carga contetn primeiro, tente colocar as tags <script> perto da parte inferior da página. Ele ainda vai ser capaz de capturar o DOMContentLoaded eo conteúdo que vem antes seja carregado antes do script.

Original:

Além de carregar no DOMContentLoaded, você poderia tê-lo carregar se uma certa var é definido verdadeira. por exemplo.

var isDOMContentLoaded = false;

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

, em seguida, adicionar para o outro arquivo de script

if (isDOMContentLoaded) loadThisScript();

Editar em resposta aos comentários:

Carregar o script e executar a função que os fogos ouvinte DOMContentLoaded. ( ler o script se você não tem certeza qual função está sendo chamado).

por exemplo.

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);

O código acima irá tentar uma vez por segundo para 60 segundos para verificar se a função que você precisa está disponível e, em caso afirmativo, executá-lo

Answer 4

AddThis tem uma seção sobre como carregar suas ferramentas de forma assíncrona .

'melhor' solução atual:

<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=[YOUR PROFILE ID]" async="async"></script>