Letztes Bild im Dokument kann nicht geladen werden - "Ressource konnte nicht geladen werden"
Ich habe ein Problem mit der anfänglichen Seitenladung einer Site nach der Aktualisierung. Ich verwende Chrome für die Entwicklung, aber das Problem ist in allen Browsern offensichtlich.
Ich erhalte die Nachricht "Waiting for mysite.com ..." und die Ladeanzeige dreht sich weiter. Das bleibt etwa 10 Sekunden lang so und dann gibt Chrome auf und sagt mir "Die Ressource 'foobah.png'" kann nicht von der Entwicklerkonsole aus geladen werden. Das Bild ist definitiv auf dem Pfad angegeben. Manchmal lädt es manchmal nicht. Wenn ich den Verweis auf dieses Bild vollständig lösche, wird der Fehler auf ein anderes Bild innerhalb der Seite fallen. Dies ist ein normaler, aber zeitweiliger Fehler.
Meine Seite ist Javascript schwer (2500+ Zeilen) Ich vermute, es könnte etwas mit beiden zu tun haben:
- Javascript geladen interferieren mit Bild lädt.
- Etwas Lustiges geht weiter das Zwischenspeichern von Bildern.
Hat jemand Erfahrung mit dieser Art von Seitenladeproblem?
Schätzen Sie jede Hilfe, die Sie geben können!
Beispiel URL: Ссылка
Chrome Developer Tools-Bildschirme:
UPDATE:
Dies ist ein Beispiel-Screenshot von Firebug. Sie können sehen, dass die Anforderung für die Ressource keine Zeitüberschreitung aufweist, aber das Abrufen viel Zeit in Anspruch nimmt.
Die Datei, die fehlschlägt, kann von CSS-Hintergrundbild zu normalem Bild zu sogar einer Schriftart-Datei variieren. Ich denke, dieses Problem ist tiefer als die Kundenseite. Wir haben auch The Chrome erlebt "Die folgenden Seiten reagieren nicht mehr. Sie können darauf warten, dass sie reagieren oder sie ausschalten". Gelegentlich. Wir haben die Seite ALLES Javascript entfernt, es ist fast eine bloße Schale! Die Bildladeprobleme treten weiterhin über den Browser auf.
UPDATE:
Ich habe festgestellt, dass die folgenden Fehler in HTTP-Fehlerprotokoll mit dem Problem verknüpft sind. Wer weiß, was sie bedeuten und wie man sie löst?
%Vor%6 Antworten
Klingt wie es ist eine ziemlich schwere Seite (2500+ Zeilen von js!). Es ist merkwürdig, dass Sie es nur in Chrome erleben, aber das liegt vielleicht an der Art, wie Anfragen bearbeitet werden.
Da Ihr statischer Inhalt so umfangreich ist, würde ich ein Content Delivery Network (CDN) empfehlen. Wenn Sie Ihre Inhalte über ein CDN (und geografische Standorte) verteilen, kann ein Benutzer vom nächsten und somit schnellsten Server bedient werden.
Es gibt viele CDN-Anbieter, die dafür aufkommen, Ihre Inhalte zu hosten. Ich benutze Amazon S3 Speichereinrichtung, und obwohl es kein echtes CDN ist, hilft es mir, meinen statischen Inhalt zu verbreiten, was meine Seiten beschleunigt.
Auch bei Amazon S3 können Sie Ihren geografischen Standort für Ihren Speicherbereich festlegen, unabhängig davon, ob es sich um USA oder Europa usw. handelt. Dieser geografische Standort ist möglicherweise näher an Ihrem vorhandenen Webserver als ein Bonus. S3 gibt Ihnen auch eine kostenlose Mitgliedschaft, um es zu testen.
Hoffe, das hilft.
Chris.
Wenn es Chrome-spezifisch wäre, würde ich sagen, dass es etwas mit zu tun haben könnte Bekannter Fehler , aber da Sie erwähnt haben, dass es in anderen Browsern passiert, erhalten Sie die gleichen Fehler von Firebug, Safari's Web-Entwickler-Tool und / oder IEs Entwickler-Tool?
Wie hoch ist die Downloadzeit und der Gesamtbetrag Ihrer Seite? Ich sehe in Ihren Bildern, dass eine große Anzahl von Dateien erscheint und einige der Bilder einige Sekunden zum Laden benötigen. Kann einer davon optimiert werden?
Eine Möglichkeit, das Problem als Ganzes zu beheben, besteht darin, Sprites zu erstellen oder, wo immer möglich, Nichtbildalternativen zu verwenden (Sie können eine Reihe von CSS3-Techniken verwenden, um Dinge wie Farbverläufe und andere Dinge zu ersetzen) sowie Tools wie SmushIt für Bilder und einen JS-Minifier und Combiner, um Ihre Dateigrößen und Serveranforderungen zu verringern.
Endlich bekomme ich jemanden mit diesem Problem bei mir:
chrome classic - "Ressourcen konnten nicht geladen werden"
Dieses Problem treibt Entwickler in den Wahnsinn, da es lokal mit einer kleinen Anzahl von Anfragen und einem winzigen PNG auftreten kann - wenn Sie das Bild jedoch in einem neuen Tab öffnen , dein Bild wird ... fein geladen!
Wichtiger Hinweis: Chrome-Caching ist das heikelste, das ich je erlebt habe - versuchen Sie, das Caching von Chrome zu deaktivieren / umgehen, indem Sie den Datenschutzmodus verwenden oder eine zufällige Zeichenfolge an die Ressourcen anhängen
Wichtiger Hinweis 2: Manchmal macht die Netzwerkregisterkarte des Web Inspectors eine Verbindungsunterbrechung - deshalb sehen Sie den Status "PENDING"
Lösungen / Workarounds, die ich versucht habe:
- Aktualisieren Sie Ihr Chrom auf das neueste (normalerweise kein Glück)
- benutze Bild-Preload (manchmal funktioniert es)
- benutze data-uri und lege es in eine andere .css-Datei: Ссылка
Bei einigen Formatierungen (CSS-Selektor, CSS-Regelreihenfolge und Zeilenumbruch) wurde das Bild mit etwas Versuch und Irrtum erneut geladen. (Dieser funktioniert magisch)
Ich frage mich, ob ein bestimmtes Bit des Ursprungsbildes den Bild-Renderer gestaut hat (da Daten-URI nicht am Anfang funktioniert) ... aber dieses Problem wird auftreten, wenn ein CSS-Stil für einen PNG-Hintergrund-Block angewendet wird wenn "Opazität" beteiligt ist (oder dass PNG ein versteckter Hintergrund ist)
Zusammenfassung:
- komprimiere dein Bild in einer beliebigen Methode
- Ändern Sie den CSS-Selektor (z. B. den Hintergrund in einem anderen Element anwenden), wenn es immer noch nicht geladen werden konnte, dann ist es das Bildproblem - versuchen Sie, ein bisschen des Ursprungsbildes zu ändern * oder data-uri (Lösung 3)
- ändere die Ladereihenfolge des Bildes, wenn (2) dein Bild geladen hat - dann ist es css selector / ordering problem
* Sie können nicht glauben, nachdem ich das Bild bearbeitet habe, das Problem erscheint / verschwindet.
(Wenn Sie lange Wartezeiten für andere Bilder über den Browser haben, ist es wahrscheinlich das Leistungsproblem, aber möglicherweise nicht der Fehler - einige Blockierungen sind aufgetreten)
So zufällig wie das klingt ... fügen Sie beim Laden eine Zufallszahl an die Quelle an. Ich hatte dieses Problem zurück, als ich an einer benutzerdefinierten Popover-Bibliothek für einen alten Arbeitgeber arbeitete, und die Seiten, auf die es geladen wurde, waren ... sehr ressourcenintensiv, sagen wir mal. Das hat es aus irgendeinem Grund für mich repariert. YMMV?
%Vor%Sie sollten in Betracht ziehen, Ihre Skriptdateien zu komprimieren (minify, gzip, etc). Mit einem anderen Host für Ihre Bilder (images.yoursite.com) haben Sie eine größere Anzahl von parallelen Verbindungen.
Sie können Async-Javascript laden - wie Google in den Google Analytics-Dokumenten vorschlägt: $ (Dokument) .ready (Funktion () {
%Vor%Ein paar Dinge zu versuchen. Um das Problem mit .woff zu beheben, fügen Sie den Servereinstellungen den richtigen MIME-Typ hinzu:
%Vor%Erstellen Sie als Nächstes das PNG-Image, das nicht geladen wird. Könnte sein, dass jemand ein Bild als .jpg oder GIF gespeichert hat, aber dann die Datei mit der Erweiterung .png umbenannt hat - was den Browser verwirrte. Versuchen Sie, das Bild erneut zu erstellen und sicherzustellen, dass es als das richtige Format gespeichert ist.
Tags und Links javascript php apache