Come gestire "l'immagine corrotta o troncati" in Firefox

Question

PLUGIN

Sto usando un plugi jQuery chiamato lazyload.

Ciò che fa è lazy caricare immagini, ovvero non le visualizza nel browser finché l'immagine non rientra nell'ambito della vista.

Questo è utile quando si dispone di una pagina che ha molte immagini, per esempio, e non si vuole che passi per sempre con il carico iniziale.

FIREFOX

Ok, quindi sono anche utilizzando Firefox versione 23.0.1

PROBLEMA

Il plug-in è grande, ma quando lo scorrimento verso il basso dopo alcune immagini che ho iniziare a ricevere gli errori dove l'immagine non viene caricata (ha solo un generico segnaposto per un collegamento di immagine interrotto) e nella console è registri:

Image corrupt or truncated: [image url]

Non è che c'è un problema con l'immagine. Tutti rendono bene individualmente.

Non è su un'immagine SPECIFICA poiché è casuale. Se carico nuovamente la pagina, le immagini che erano corrupt possono essere caricate ora, con altre immagini che restituiscono un collegamento interrotto e registrano corrupt nella console.

Ho cercato in giro per questo, e sembra che ci sia qualche problema con fetch simultanei per un tag src <img>.

Forse ci dovrebbe essere un ritardo impostato sul recupero, tuttavia non si può sempre dire per quanto tempo dovrebbe essere il ritardo. E se un'immagine è più grande di un'altra, potrebbe comunque entrare in conflitto (con un ritardo statico, a differenza di una richiamata complete).

Pertanto, vorrei richiedere:

a) Se qualcuno sa di una soluzione a questo (come cattura quando si verifica l'errore e ri-attivazione della funzione dell'immagine carico)
b) Se qualcuno può proporre uno $.extend() alla libreria sopra (lazyload) che creerebbe una funzione di callback e attendere fino a quando tutti i recuperi attivi sono complete prima di caricare il successivo (SE questo è il problema - Non sono sicuro se lo è) Io non sono un jQuery ni nja quindi sono un po 'perso nel codice. Potrei capirlo, ma sarebbe probabilmente sporca ...
c) Se questo non è il problema, allora qualche direzione su come posso risolvere questo sarebbe apprezzato

Answer 1

Come suggerito in questa answer ad un problema simile al tuo:

Sembra che quando si cambia l'attributo src del tag img, Firefox spara un evento carico. Ciò è contrario alla specifica HTML5 , che dice che se l'attributo src viene modificato, quindi qualsiasi altro fetch già in corso dovrebbe essere finito (che Firefox fa), e eventi devono essere inviati. L'evento di caricamento deve essere inviato solo se il recupero è stato completato correttamente. Quindi direi che il fatto che si ottiene un evento di caricamento è un bug di Firefox.

E poi:

L'opzione migliore potrebbe essere quella di creare un nuovo elemento ogni volta che si desidera cambiare l'attributo src.

Che ha senso. All'interno lazyload codice, troverete questo da una parte, che sembra essere quando i carichi di immagini, rispondendo a un evento di scorrimento che innesca 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; 

Si può mettere un operatore AND seguito da un po 'di bandiera o fuction ritorno che verifica se l'ultima immagine è già completamente caricato sulla parte:

if ($self.is("img") && lastImageIsLoadde() === true) { /*pseudocode here*/ 

impedendo così che img src viene sostituito prima del tempo corretto (poiché settings.placeholder è l'immagine dello script prende posizione al posto di quello per essere caricato durante lo scorrimento) e vedi se funziona per te.

Answer 2

Vorrei verificare prima se hai una versione aggiornata della libreria lazyload. https://github.com/tuupola/jquery_lazyload/blob/master/jquery.lazyload.min.js

Attualmente v 1.9.7 è l'ultimo Potrebbe essere un bug che hanno già risolto. (changelog: https://github.com/tuupola/jquery_lazyload/blob/master/CHANGELOG.textile)

In secondo luogo, quale versione jQuery stai usando? Forse un jQuery molto vecchio con una vecchia libreria lazyload causa questo problema? (O forse il più nuovo jQuery?)

Se tutto va bene, forse si può capire come viene avviato il lazyload? Avete richieste di jax e riavviate il lazyloading? (Non dovrebbe causare problemi, ma non si sa mai). Oppure prova una diversa struttura doctype/html?

Se non funziona, vorrei 'smontare' il documento HTML a una versione veramente pulito in cui le opere lazyloading (solo test localhost, o jsfiddle o qualcosa) e rimettere le parti uno per uno. Alla fine dovresti vedere dove si interrompe la funzionalità.

con jQuery v1.9.1 e v1.9.7 LazyLoad dovrebbe funzionare con questo:

$('.lazy').lazyload(); 

Ecco un jsfiddle per il test: http://jsfiddle.net/web_nfo/21qb88v1/

O forse Firefox è solo il problema. Attualmente la versione 40 è quella recente. Forse hai anche una versione "beta" installata? O in modalità provvisoria?