Lazy sta caricando lo script addthis? (o pigro caricamento del contenuto js esterno in base agli eventi già attivati)

Question

Desidero avere il widget addthis disponibile per i miei utenti, ma voglio caricarlo pigro in modo che la mia pagina venga caricata il più rapidamente possibile. Tuttavia, dopo aver provato tramite un tag script e quindi tramite il mio metodo di caricamento lento, sembra funzionare solo tramite il tag script. Nel codice offuscato, vedo qualcosa che sembra dipendere dall'evento DOMContentLoaded (almeno per firefox).

Poiché l'evento DOMContentLoaded è già stato attivato, il widget non viene visualizzato correttamente. Cosa fare?

Potrei semplicemente usare un tag script (più lento) ... oppure posso attivare (in modo cross browser) l'evento DOMContentLoaded (o equivalente)? Ho la sensazione che questo potrebbe non essere possibile b/c Credo che (come jQuery) ci siano più test dell'evento content ready, e quindi dovrebbero accadere più eventi simulati.

Tuttavia, questo è un problema interessante b/c Ho visto un paio di widget ora supponiamo che tu stia includendo le loro cose tramite tag di script statici. Sarebbe bello se scrivessero il codice che era più utile agli sviluppatori preoccupati per la velocità, ma fino ad allora, c'è un problema? E/o alcune delle mie supposizioni sono errate?

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

Si tratta di un problema specifico. Non sto cercando un altro script di caricamento pigro o controllo se alcune dipendenze sono script caricati. specificamente questo problema si occupa di

1. widget esterni che non ti hanno il controllo su e può o non può essere offuscato
2. ritardando il carico delle widget esterni fino a quando non sono necessari o almeno , til sostanzialmente dopo tutto il resto è stato caricato compresi altri elementi differite
3. b/c del modo è stato scritto il widget, preclude esistenti, 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 nella parte inferiore della pagina. Sto cercando di salvare quei 500-1000 ms ** anche se numerosi studi di yahoo, google e amazon mostrano che è importante per l'esperienza dell'utente.

** Il mio test con testa di martello ed 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 ho stavo cercando.

Dopo aver letto questo post su come la maggior parte delle librerie js correnti implementano i test per un evento dom caricato. Ho passato un po 'di tempo con il codice offuscato e sono stato in grado di determinare che addthis utilizza una combinazione del metodo doscroll, timer e l'evento DOMContentLoaded per vari browser. Poiché solo questi browser dipendenti sull'evento DOMContentLoaded avrebbe bisogno il seguente codice comunque:

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

e il resto dipendono timer test per l'esistenza di alcune proprietà, ho solo dovuto accogliere questo caso per poter carico pigrizia questo contenuto JS esterno piuttosto che usare i tag script statici, risparmiando così il tempo che speravo. :)

Answer 2

Modifica: Se l'obiettivo è semplicemente quello di caricare prima l'altro contetn, provare a inserire i tag <script> nella parte inferiore della pagina. Sarà ancora in grado di catturare DOMContentLoaded e il contenuto che precede verrà caricato prima dello script.

originale:

oltre al caricamento su DOMContentLoaded, si potrebbe avere caricare se una certa var è impostata vero. per esempio.

var isDOMContentLoaded = false; 

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

poi aggiungere alle altre file di script

if (isDOMContentLoaded) loadThisScript(); 

Modifica in risposta ai commenti:

caricare lo script, ed eseguire la funzione che l'ascoltatore incendi DOMContentLoaded. (leggi lo script se non sei sicuro di quale funzione viene chiamata).

ad 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 cercherà una volta al secondo per 60 secondi per verificare che la funzione che vi serve è a disposizione, e, in caso affermativo, eseguirlo

Answer 3

La soluzione più semplice è impostare il parametro domready su 1 quando si incorpora lo script addthis nella pagina. Ecco un esempio:

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

L'ho provato su IE, Firefox, Chrome e Safari, e tutto ha funzionato bene. Ulteriori informazioni su addthis sono disponibili per i parametri di configurazione here.