Pigro caricamento dello script AddThis? (O pigri carico contenuto js esterno dipende già eventi generati)

Question

Io voglio avere la AddThis widget di disposizione per i miei utenti, ma voglio caricare pigro in modo che i miei caricamento della pagina il più rapidamente possibile. Tuttavia, dopo aver provato tramite un tag script e poi tramite il mio metodo di caricamento pigro, sembra funzionare solo tramite il tag script. Nel codice offuscato, vedo qualcosa che sembra che sia dipendente dalla manifestazione DOMContentLoaded (almeno per Firefox).

Poiché l'evento DOMContentLoaded ha già sparato, il widget non viene visualizzato correttamente. Cosa fare?

ho potuto solo utilizzare un tag script (più lento) ... o potrei sparare (in modo cross browser) il DOMContentLoaded (o equivalente) evento? Ho la sensazione che questo potrebbe non essere possibile, perché credo che (come jQuery) ci sono più prove del contenuto dell'evento pronto, e così più eventi simulati avrebbero dovuto verificarsi.

Tuttavia, questo è un problema interessante perché ho visto un paio di widget ora per scontato che si sta includendo la loro roba tramite tag script statici. Sarebbe bello se hanno scritto il codice che era più utile per gli sviluppatori preoccupati per la velocità, ma fino ad allora, c'è un lavoro in giro? E / o sono una delle mie ipotesi non va?

Modifica Perché la prima risposta alla domanda sembrò perdere il punto del mio problema, ho voluto chiarire la situazione.

Si tratta di un problema specifico. Io non sto cercando ancora un altro script di caricamento pigro o controllare se alcune dipendenze sono caricati script. In particolare questo problema si occupa di

1. i widget esterni che non si fanno avere il controllo e può o non può essere offuscato
2. ritardando il carico del widgets esterni fino essi sono necessari o almeno, til sostanzialmente dopo tutto il resto è stata caricata comprende altri elementi differite
3. b / c del modo il widget è stato scritto, osta esistente, tipico lazy loading paradigmi

Mentre è esoterica, ho visto accadere con un paio di widget - in cui gli sviluppatori di widget presumere che si sta solo disposti a gettare in un altro tag script in fondo alla pagina. Sto cercando di salvare quelle 500-1000 ms ** anche se, come numerosi studi da parte di Yahoo, Google e Amazon mostrano che sia importante l'esperienza dell'utente.

** Il mio test con martello e l'esperienza personale indica che questo sarà il mio risparmio in questo caso.

Answer 1

Questo codice risolve il problema e consente di risparmiare il tempo di caricamento che stavo cercando.

Dopo aver letto questo postale su js come più attuali librerie implementano test per un evento dom caricato. Ho trascorso qualche tempo con il codice offuscato, e sono stato in grado di determinare che AddThis usa una combinazione del metodo citato doscroll, timer, e l'evento DOMContentLoaded per vari browser. Dal momento che solo i browser dipendenti dalla manifestazione DOMContentLoaded avrebbe bisogno il seguente codice in ogni caso:

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

e il resto dipende da timer test per l'esistenza di alcune proprietà, ho avuto solo per ospitare questo un caso di essere in grado di caricare pigro questo contenuto JS esterno invece di usare i tag di script statici, risparmiando così il tempo che speravo per. :)

Answer 2

La soluzione più semplice è quella di impostare il parametro domready a 1 quando l'incorporamento lo script AddThis nella tua pagina. Ecco un esempio:

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

Ho testato su IE, Firefox, Chrome e Safari, e tutto ha funzionato bene. Maggiori informazioni sul AddThis parametri di configurazione è disponibile qui .

Answer 3

Edit: Se l'obiettivo è semplicemente quello di avere il vostro altro carico contetn prima, prova a mettere i tag <script> nella parte inferiore della pagina. Sarà ancora in grado di catturare l'DOMContentLoaded e il contenuto che viene prima verranno caricati prima dello script.

originale:

Oltre al carico sulla DOMContentLoaded, si potrebbe avere caricare se una certa var è impostata vero. per es.

var isDOMContentLoaded = false;

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

quindi aggiungere alle altre file di script

if (isDOMContentLoaded) loadThisScript();

Modifica in risposta alle osservazioni:

Caricare lo script, ed eseguire la funzione che l'ascoltatore incendi DOMContentLoaded. ( lettura lo script, se non siete sicuri di quale funzione viene chiamato).

es.

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

È possibile che questo cercherà una volta al secondo per 60 secondi per controllare se la funzione che vi serve è a disposizione, e, in caso affermativo, eseguirlo

Answer 4

AddThis ha una sezione sulla come caricare i loro strumenti in modo asincrono .

attuale soluzione 'migliore':

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