Zu behandeln, wie "Bild beschädigt oder abgeschnitten" in firefox

PLUGIN

Bin ich über ein jQuery-plugi genannt lazyload.

Was dieser tut, ist lazy Bilder laden - heißt es nicht dass Sie Sie im browser, bis das Bild innerhalb des Bereichs des Viewports.

Dies ist nützlich, wenn Sie haben eine Seite, die viele Bilder, zum Beispiel, und Sie nicht wollen, es zu verbringen, immer mit dem initial-laden.

FIREFOX

Ok, also ich bin auch mit Firefox version 23.0.1

PROBLEM

Das plug-in ist toll, aber beim scrollen nach unten, nachdem einige Bilder, die ich starten immer Fehler, wo das Bild nicht geladen werden kann (nur ein generischer Platzhalter für einen kaputten Bild-link) und in der Konsole gibt es Protokolle:

Image corrupt or truncated: [image url]

Ist es nicht, dass es ein problem mit dem Bild. Sie alle render-fein-individuell.

Es ist nicht auf ein BESTIMMTES Bild, wie es zufällig ist. Wenn ich die Seite wieder geladen, die Bilder wurden corrupt laden kann nun mit anderen Bildern Rücksendung eines Defekten Links und Protokollierung corrupt in der Konsole.

Ich gesucht, um für dieses, und es scheint, dass es einige problem mit der gleichzeitigen holt sich für ein <img> src-tag.

Vielleicht sollte es eine Verzögerung auf dem set zu Holen, allerdings kann man nicht immer sagen, wie lange die Verzögerung sein soll. Und wenn ein Bild größer ist als die andere, könnte es immer noch Konflikte (mit einer statischen Verzögerung, im Gegensatz zu einem complete Rückruf).

Daher ich würde gerne:

a), Wenn jemand kennt eine Lösung für dieses (wie fangen, wenn der Fehler Auftritt und re-Auslösung der load-Bild-Funktion)

b) Wenn jemand vorschlagen kann, eine $.extend() zur Bibliothek oben (lazyload) würde erstellen Sie eine callback-Funktion, und warten Sie, bis alle aktiven holt sind complete vor dem laden des nächsten (WENN das das problem ist - ich bin nicht sicher, ob es ist)
ich bin nicht ein jQuery-ninja also ich bin ein wenig verloren auf dem code. Ich könnte es herausfinden, aber wahrscheinlich wäre es schmutzig...

c), wenn dies NICHT das problem, dann eine Richtung, wie ich dieses Problem lösen würde geschätzt

Überprüfen Sie Ihre Netzwerk-tab in Ihrem browser Konsole/Entwickler-tools. Wie die Bild-Anfragen Aussehen? Was Header sind, die Sie empfangen vom server? p/s: If anybody can propose an $.extend() to the library above... das ist nicht, wie die SO funktioniert.
Danke - ich habe auf die Registerkarte Netzwerk, und jede Datei wird aufgerufen und bekommt einen HTTP-status 200-code. Also die Datei vorhanden ist. Einige render, einige nicht. Es scheint nicht besonders auf die Dateigröße. Alles andere, was ich überprüfen sollte? ...
können Sie den code in jsfiddle, seine schwer zu sagen, was das Problem verursacht.

InformationsquelleAutor Walker Farrow | 2015-09-08

6

Wie vorgeschlagen, auf dieser Antwort zu einem problem ähnlich wie bei Ihnen:

Scheint es, dass beim ändern des src-Attributs des img-Tags,
Firefox feuert ein load-Ereignis. Dies ist im Gegensatz zu den HTML5
- Spezifikation, die sagt, dass wenn das src-Attribut geändert wird, dann
andere Holen, die bereits im Gange sein sollte, endete (welche Firefox
es tut), und keine Ereignisse gesendet werden sollen. Das load-Ereignis gesendet werden sollen
nur, ob der Abruf erfolgreich abgeschlossen wurde. Also ich würde sagen, dass die Tatsache,
Sie erhalten ein load-Ereignis ist ein Firefox bug.

Dann:

Kann die beste option sein, um ein neues element zu erstellen jedes mal, wenn Sie
möchten, ändern Sie das src-Attribut.

Was Sinn macht.
Innerhalb lazyload - code, werden Sie feststellen, dass ein Teil, das scheint zu sein, wenn das Bild geladen, reagieren, um ein Bildlauf ausgelöst appear:
```
    /* When appear is triggered load original image. */
    $self.one("appear", function() {
        if (!this.loaded) {
            if (settings.appear) {
                var elements_left = elements.length;
                settings.appear.call(self, elements_left, settings);
            }
            $("<img />")
                .bind("load", function() {

                    var original = $self.attr("data-" + settings.data_attribute);
                    $self.hide();
                    if ($self.is("img")) {
                        $self.attr("src", original);
                    } else {
                        $self.css("background-image", "url('" + original + "')");
                    }
                    $self[settings.effect](settings.effect_speed);

                    self.loaded = true;
```
Sie können ein AND-operator, gefolgt von einigen fahne oder fuction Rückkehr, die überprüft, ob das Letzte Bild ist schon voll beladen, das Teil:
```
if ($self.is("img") && lastImageIsLoadde() === true) { /*pseudocode here*/
```
verhindert so, dass img src wird ersetzt, bevor seine richtige Zeit (seit settings.placeholder ist das Bild, das Skript stehen an der Stelle von der man geladen wird beim scrollen) und sehen, ob es für Sie arbeitet.
- Diese Lösung ist aber auf die Idee, dass es aus der hand für Sie zu erstellen Sie eine neue <img> tag jedes mal den viewport-Bereich löst das Ereignis. Wenn es kein problem ist, dann sollten Sie die verlinkte Antwort (ich glaube, Sie haben bereits getan haben 🙂 )
- danke. Diese mehr oder weniger Punkte für mich in die richtige Richtung. Was ich denke, das eigentliche problem ist, wie Firefox Speicher verarbeitet für so viele image-tags geöffnet auf einmal. Also werde ich diesen code ändern, so dass, wenn Sie das Bild "verschwindet" aus dem viewport, es entfernt das img selbst (oder so ähnlich). Hoffentlich löscht der mem. Wir werden sehen... Tks
InformationsquelleAutor Alan Machado
0

Ich würde zuerst überprüfen, wenn Sie eine aktualisierte version des lazyload-Bibliothek.
https://github.com/tuupola/jquery_lazyload/blob/master/jquery.lazyload.min.js

Derzeit v 1.9.7 ist die neueste. Es könnte ein Fehler sein, den Sie bereits behoben.
( changelog: https://github.com/tuupola/jquery_lazyload/blob/master/CHANGELOG.textile )

Zweitens, welche jQuery-version verwendest du? Vielleicht einer sehr alten jQuery mit einem alten lazyload-Bibliothek, die das problem verursacht? (Oder vielleicht die neueste jQuery?)

Wenn das alles in Ordnung, vielleicht können Sie sehen, wie sich die lazyload eingeleitet wird? Sie haben ajax-requests und die re-Initiierung des lazyloading? (Sollte keine Probleme verursachen, aber man weiß ja nie). Oder versuchen, verschiedene doctype/html-Struktur?

Wenn nichts funktioniert, würde ich 'Streifen' das html-Dokument, um eine wirklich saubere version, wo das lazyloading funktioniert (localhost testen, oder jsfiddle oder so) und wieder Teile eins nach dem anderen. Schließlich sollten Sie sehen, wo die Funktionalität bricht.

Mit jQuery v1.9.1 und Lazyload v1.9.7 sollte es einfach mit:
```
$('.lazy').lazyload();
```
Hier ein jsfiddle für die Prüfung: http://jsfiddle.net/web_nfo/21qb88v1/

Oder vielleicht ist Firefox gerade das problem. Aktuell version 40 ist die jüngste. Vielleicht haben Sie auch eine 'beta' - version installiert? Oder safe-mode auf?

InformationsquelleAutor Develop123

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.