Verzögertes laden der addthis Skript? (oder faul laden von externen js-Inhalte abhängig von bereits gefeuert Veranstaltungen)

Ich will die addthis widget zur Verfügung für meine Nutzer ist, aber ich will lazy load ist es so, dass meine Seite geladen wird so schnell wie möglich. Jedoch, nachdem Sie versucht es über ein script-tag und dann über meine lazy loading-Methode, es scheint zu funktionieren nur über den script-tag. In den verborgenen code, ich sehe etwas, das aussieht wie es ist abhängig von den DOMContentLoaded-event (zumindest für Firefox).

Seit dem DOMContentLoaded-Ereignis bereits ausgelöst, wird das widget nicht richtig dargestellt. Was ist zu tun?

Konnte ich nur mit einem script-tag (langsamer)... oder könnte ich Feuer (cross-browser Weg) das DOMContentLoaded (oder gleichwertig) - Ereignis? Ich habe das Gefühl, das kann nicht möglich sein, da ich glaube, dass (wie jQuery) gibt es mehrere tests, der die Inhalte bereit-Ereignis, und so mehrere der simulierten Ereignisse stattfinden müsste.

Trotzdem ist dies ein Interessantes problem, weil ich gesehen habe, ein paar widgets gehen nun davon aus, dass Sie auch Ihre Sachen über statische script-tags. Es wäre schön, wenn Sie schrieben code, war mehr nützlich, um die Entwickler besorgt über die Geschwindigkeit, aber bis dahin ist es eine Arbeit um? Und/oder sind meine Annahmen falsch?

Edit:
Weil die 1. Antwort auf die Frage schien den Punkt verpassen, der mein problem, ich wollte die situation klären.

Dies ist über ein bestimmtes problem. Ich bin nicht auf der Suche für ein weiteres lazy load Skript oder überprüfen Sie, wenn einige Abhängigkeiten geladen sind-Skript. Speziell dieses problem befasst sich mit

externe widgets, die Sie nicht
die Kontrolle über und kann oder kann nicht
werden verschleiert
verzögert das laden der
externe widgets, bis Sie
benötigt werden, oder zumindest, til
wesentlich nach alles andere
wurde geladen, darunter auch andere latente Elemente
b/c der wie
das widget geschrieben wurde, ausschließt
vorhandene, typische lazy loading
Paradigmen

Während es esoterisch, ich habe gesehen, es passieren, mit ein paar widgets - wo die widget-Entwickler davon aus, dass Sie nur bereit zu werfen in einem weiteren script-tag am unteren Rand der Seite. Ich bin auf der Suche zu speichern 500-1000 ms** obwohl, wie zahlreiche Studien von Yahoo, Google und Amazon zeigen, dass es wichtig zu sein, um Ihre Benutzer-Erfahrung.

**Mein Test mit hammerhead und die persönliche Erfahrung zeigt, dass dies meine Ersparnisse in diesem Fall.

InformationsquelleAutor Keith Bentrup | 2009-06-03

12

Die einfachste Lösung ist das festlegen der parameter domready zu 1, wenn das einbetten von addthis Skript in Ihre Seite. Hier ist ein Beispiel:
```
<script type="text/javascript" 
src="http://s7.addthis.com/js/250/addthis_widget.js#username=addthis&domready=1">
</script>
```
Habe ich es getestet auf IE, Firefox, Chrome und Safari, und alle haben einwandfrei funktioniert. Mehr Informationen zu addthis Konfiguration Parameter ist verfügbar hier.
- Viel besser als die akzeptierte Antwort
- Dieser blog-post war super hilfreich, t.co/6uk9sHU0. Im wesentlichen, nachdem Sie laden Sie Ihre Inhalte via ajax laden der addthis Skript via $.getScript dann rufen addthis.init() nachdem das Skript fertig geladen ist.
- jetzt gibt es auch async - option, die macht das laden der Seite noch schneller. addthis.com/help/optimizing-addthis
InformationsquelleAutor Hamid
8

Dieser code löst das problem und spart die Ladezeit, die ich suchte.

Nach der Lektüre dieses post darüber, wie die meisten aktuellen js-Bibliotheken implementieren von tests für ein dom-event geladen. Ich verbrachte einige Zeit mit den verborgenen code, und ich war in der Lage zu bestimmen, dass addthis verwendet eine Kombination der genannten doscroll Methode, Timer, und das DOMContentLoaded-Ereignis für verschiedene Browser. Da nur diese Browser abhängig von den DOMContentloaded-Ereignis würde den folgenden code benötigen sowieso:
```
if( document.createEvent ) {
 var evt = document.createEvent("MutationEvents"); 
 evt.initMutationEvent("DOMContentLoaded", true, true, document, "", "", "", 0); 
 document.dispatchEvent(evt);
}
```
und der rest hängt von Timer-Tests für das Vorhandensein bestimmter Eigenschaften, die ich nur hatte, um diesen Fall zu Fall in der Lage sein, um lazy load zu diesen externen JS-Inhalte eher als mit der statischen script-tags, so sparen Sie die Zeit, die ich mir erhofft hatte. 🙂
- Antwort ist besser
InformationsquelleAutor Keith Bentrup
1

Edit: Wenn das Ziel ist einfach, um Ihre anderen contetn zuerst geladen werden, versuchen Sie, die <script> - tags in der Nähe der Unterseite der Seite. Es wird immer noch in der Lage sein zu fangen das DOMContentLoaded und der Inhalt stammt, bevor Sie geladen wird, bevor das Skript.

Original:

zusätzlich zu laden, auf DOMContentLoaded, kann er geladen werden, wenn eine bestimmte Variable ist true. z.B.
```
var isDOMContentLoaded = false;

document.addEventListener("DOMContentLoaded",function() { isDOMContentLoaded = true; }, false);
```
dann fügen Sie die andere Skript-Datei
```
if (isDOMContentLoaded) loadThisScript();
```
Bearbeiten in Reaktion auf die Kommentare:

Laden Sie das Skript, und führen Sie die Funktion, die das DOMContentLoaded-listener feuert. (Lesen das Skript, wenn Sie nicht sicher sind, welche Funktion aufgerufen wird ).

z.B.
```
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);
```
Den obigen versuchen wird einmal pro Sekunde für 60 Sekunden, um zu überprüfen, ob die Funktion, die Sie brauchen, verfügbar ist, und, wenn ja, führen Sie es
- Es ist eine externe js-widget. Ich habe keine Kontrolle über die Inhalte.
- Es gibt ein paar Abschnitte, die sich auf das DOMContentLoaded-Ereignis, das nennen anonyme Funktionen & scheinen im-Verschlüsse mit ausgeblendeten Zustand. Dies ist obfuscated code, so dass, obwohl ich versuche, herauszufinden, was genau Sie tun auf dem DOMContentLoaded-Ereignis, es kann nicht sein, dass einfach. Ich überlege mir, einen anderen Ansatz zu versuchen, um herauszufinden, welche Veranstaltungen es sucht und brennen diese, und ich Frage mich, ob es möglicherweise eine generalisierte Lösung - einige code, um das Feuer ein DOMContentLoaded-Ereignis aus, nachdem der "echte" durch den browser bereits entlassen oder auf eine andere Weise, um es zu lösen.
- nehmen Sie die anonyme Funktionen aus und geben Sie einen Namen in Ihrem Skript. var loadFunction = function() { /* whatever*/ }, dann nennen die Funktionen der checkAndLoad()
- Wie würde ich die anonymen Funktionen heraus? Ich habe keine Kontrolle über die externen js.
- gibt es nicht, meines Wissens nach, jeder Weg, um Feuer DOMContentLoaded, nachdem die Seite bereits gefeuert es einmal. Gibt es etwas ähnliches für jquery zur Simulation von Maus-und Tastatur-Ereignisse, aber nichts, das ich kenne, für DOMcontentLoaded
- laden Sie die js und kopieren/einfügen
- Aber es hat Stand in dieser Funktion konnte ich nicht einfach cut & fügen Sie den Abschnitt. Ich brauchen würde, um zu verstehen, was den Zustand der verschiedenen Variablen an der Zeit, dass es genannt wird - so habe ich mehr Zeit damit verbringen, zu zergliedern, obfuscated code. Ich kann letztendlich müssen dies tun, wenn es keine Arbeit um, aber ich bin der Hoffnung, ein anderer Ansatz könnte ergiebiger sein.
- Sie sollten erwägen, diese firefox-add-on addons.mozilla.org/en-US/firefox/addon/10345 Es sollte Ihnen helfen, analysieren, was das Skript tut
- vielen Dank für den link zu dem add-on. ich freue mich auf die Prüfung.
InformationsquelleAutor Jonathan Fingland
0

AddThis hat einen Abschnitt über gewusst wie: laden Ihre Werkzeuge asynchron.

Aktuellen 'beste' Lösung:
```
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=[YOUR PROFILE ID]" async="async"></script>
```
InformationsquelleAutor MastaBaba

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.