Ermitteln Ressource, die beim Laden mit Javascript

hängen Ich habe eine Reihe von Funktionen, die auf $(window).on('load' ...) aufgerufen werden müssen. Gelegentlich hängt die Site beim Laden unbegrenzt. Es gibt eine Reihe von Einbettungen und anderen Medien, die von verschiedenen APIs eingezogen werden.Ermitteln Ressource, die beim Laden mit Javascript

Ist es möglich zu erkennen, was noch aussteht, ohne einen Ereignis-Listener an jede Ressource anzuhängen?

bearbeitet zur Klarstellung:

@ unter PamBlam Kommentar mehr wurde auf das Problem abgestimmt - Ich möchte dies mit Javascript tun zu können, so dass es Client-Seite, während meine Benutzer betrachten passieren könnte.

Insbesondere möchte ich in der Lage sein ausstehende Anfragen zu identifizieren und relevante Details zu erhalten und eine Notiz an einen Fehlerlogger (wie Sentry) zu senden, um zu sehen, welche speziellen Ressourcen Probleme für Benutzer auf der Live-Site sind. Vielleicht wäre die einzige Lösung, eine neue loadResource-Funktion zu erstellen (wie in einigen Antworten vorgeschlagen), die diese Details kompiliert und nach einer langen Zeitüberschreitung eine Notiz an den Logger sendet, wenn sie noch nicht beendet ist. Aber das scheint übertrieben zu sein. Auch einige dieser Ressourcen sind s, die im HTML enthalten sind, also mehr Arbeit, um das hinzuzufügen.

Was ich gehofft hatte - und ich vermute, dass dies nicht existiert, da ich annehme Javascript doesn Habe keine Erlaubnis zu sehen, was auf der Browser-Ebene passiert - war etwas, das nach einer langen Auszeit im Wesentlichen auf die Netzwerk-Registerkarte von Dev-Tools schauen und einen Bericht darüber senden könnte, was noch aussteht.

Quelle

2016-10-26 Good Idea

Warum nicht die Anwendungsressourcen in Dev-Tools betrachten? Sie können sehen, welche Dateien bereits geladen wurden, auch wenn Sie in Ihrer Konsole sehen, können Sie sehen, ob etwas nicht geladen werden konnte. – Adjit

Fügen Sie eine 'var i = 0;' hinzu und fügen Sie 'console.log (++ i)' nach jedem Ressourcenaufruf durch Kopieren und Einfügen hinzu. Dann kann das gute alte Control + Z beim Zurücksetzen zum Tragen kommen. –

Schauen Sie sich einfach die Registerkarte Netzwerk an. Es gibt wahrscheinlich eine Anfrage im Status "(ausstehend)". –

Eine der besten Möglichkeiten zum Debuggen von JavaScript ist Chrome DevTools (während ich ein großer Verfechter von Firefox bin, in diesem Fall ist Chrome einfach umwerfend). Verwenden Sie Debug-Breakpoints und vernetzen Sie nach besten Kräften.

Anfügen den Link für eine Verweisung https://developers.google.com/web/tools/chrome-devtools/

Quelle

2016-10-26 18:38:31 thedarkone

Firebug ist verfügbar auf ff und chome, fyi –

Ja, ich weiß, und absolut liebte es, während mit Unterstreichung, VanilleJS und dergleichen. Mit dem Erscheinen von Angular und React hat DevTools jedoch einen ernsthaften Schritt gemacht. – thedarkone

zählen, wie viele Ressourcen geladen werden, und verringern die Zählung, wenn jeder fertig ist. Wenn der Zählerstand null ist, sind alle Ressourcen erledigt.

var resourcesPending = 0; 

// Load some resources 
resourcesPending++; 
loadAResource(function(){ 
    resourcesPending--; 
    if(!resourcesPending) allResourcesLoaded(); 
}); 

resourcesPending++; 
loadAResource(function(){ 
    resourcesPending--; 
    if(!resourcesPending) allResourcesLoaded(); 
}); 

// etc..

Quelle

2016-10-26 18:39:45

Ermitteln Ressource, die beim Laden mit Javascript

Antwort

Verwandte Themen