Lazy cargando el script addthis? (o perezoso cargando contenido js externo dependiente de eventos ya activados)

Question

Quiero tener el widget addthis disponible para mis usuarios, pero quiero cargarlo de forma que la página se cargue lo más rápido posible. Sin embargo, después de probarlo a través de una etiqueta de script y luego a través de mi método de carga diferida, parece que solo funciona a través de la etiqueta de script. En el código ofuscado, veo algo que parece depender del evento DOMContentLoaded (al menos para firefox).

Como el evento DOMContentLoaded ya se ha activado, el widget no se procesa correctamente. ¿Qué hacer?

Podría simplemente usar una etiqueta de script (más lenta) ... o podría disparar (de forma cruzada) el evento DOMContentLoaded (o equivalente)? Tengo la sensación de que esto podría no ser posible. Creo que (como jQuery) hay varias pruebas del evento de contenido preparado, por lo que tendrían que ocurrir múltiples eventos simulados.

Sin embargo, este es un problema interesante b/c He visto un par de widgets ahora suponen que está incluyendo sus cosas a través de etiquetas de scripts estáticos. Sería bueno si escribieran un código que fuera más útil para los desarrolladores preocupados por la velocidad, pero hasta entonces, ¿hay algo que funcione? ¿Y alguna de mis suposiciones es incorrecta?

Editar: Como la primera respuesta a la pregunta parecía perder el sentido de mi problema, quería aclarar la situación.

Esto es sobre un problema específico. No estoy buscando otra secuencia de comandos de carga diferida ni compruebo si algunas de las dependencias están cargadas. Específicamente este problema se ocupa de

1. reproductores externos que no hacer controlar y pueden o no pueden ser ofuscado
2. retrasar la carga de los reproductores externos hasta que son necesarios o al menos , til sustancialmente después de todo lo demás se ha cargado incluyendo otros elementos diferidos
3. b/c de la forma en el widget fue escrita, se opone a existentes, carga típica perezosa paradigmas

Si bien es esotérica, he visto que suceda con un par de widgets - donde los desarrolladores de widgets asumen que no eres más que dispuesto a tirar en otra etiqueta de script en la parte inferior de la página. Estoy buscando salvar esos 500-1000 ms **, aunque numerosos estudios realizados por yahoo, google y amazon demuestran que es importante para la experiencia de su usuario.

** Mis pruebas con hammerhead y experiencia personal indican que este será mi ahorro en este caso.

Answer 1

Este código resuelve el problema y ahorra el tiempo de carga que estaba buscando.

Después de leer este post acerca de cómo la mayoría de las bibliotecas js actuales implementan pruebas para un evento dom cargado. Pasé un tiempo con el código ofuscado, y pude determinar que addthis usa una combinación del método doscroll mencionado, los temporizadores y el evento DOMContentLoaded para varios navegadores. Dado que sólo aquellos navegadores que dependen del evento DOMContentLoaded necesitarían el siguiente código de todos modos:

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

y el resto dependen de las pruebas de contadores de tiempo de la existencia de ciertas propiedades, sólo tenía para dar cabida a este único caso de poder de carga perezosa este contenido externo de JS en lugar de usar las etiquetas de script estáticas, ahorrando así el tiempo que estaba esperando. :)

Answer 2

Editar: Si el objetivo es simplemente tener su otra carga contetn primero, intente poner las etiquetas <script> cerca de la parte inferior de la página. Todavía podrá capturar DOMContentLoaded y el contenido que viene antes se cargará antes del script.

original:

, además de la carga en DOMContentLoaded, que podría hacer que cargue si un determinado var se establece cierto. p.ej.

var isDOMContentLoaded = false; 

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

continuación, añadir a otro archivo de script

if (isDOMContentLoaded) loadThisScript(); 

Editar en respuesta a los comentarios:

Cargar la secuencia de comandos y ejecutar la función que los fuegos oyente DOMContentLoaded. (lea la secuencia de comandos si no está seguro de qué función se está llamando).

p. Ej.

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

Lo anterior se trate de una vez por segundo durante 60 segundos para comprobar si la función que necesita está disponible, y si es así, ejecutarlo

Answer 3

La solución más simple es establecer el parámetro domready en 1 al insertar una secuencia de comandos addthis en su página. Aquí hay un ejemplo:

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

Lo he probado en IE, Firefox, Chrome y Safari, y todo funcionó bien. Se encuentra disponible más información sobre los parámetros de configuración de addthis here.