Qual è il modo ottimale per gestire le immagini rotte?

Question

Quindi sembra che ci siano pochi modi per gestire le immagini danneggiate su una pagina HTML. Mi piacerebbe sapere quali sono i modi in uso popolare e quali sono i modi per essere considerati le migliori pratiche?

Per avviare Ho guardato un po 'di me stesso piace:

function imgErr(source) {  
    source.src = /images/missing.jpg"; 
    source.onerror = ""; 
    return true; 
} 
<img src="test.jpg" alt="test" title="test" onerror="imgErr(this);" /> 

Pro: funziona ogni volta, l'evento sarà sempre essere catturato. L'utente non vede mai l'immagine rotta. Sembra funzionare bene attraverso i browser. Contro: tag onerror richiesto su ogni immagine, funzione imgErr (fonte) ha bisogno di essere in testa per catturare gli errori, rallenta gli utenti hanno sperimentato il tempo di caricamento

$('img').error(function(){ 
    $(this).attr('src', 'missing.jpg'); 
}); 

Pro: molto poco codice, funziona su tutte le immagini senza cambiare il loro margine di profitto, può essere posto al di fuori della testa Contro: può mancare l'evento di errore a seconda della velocità delle pagine degli eventi onload, rallenta gli utenti esperti il ​​tempo di caricamento

$(window).load(function() { 
    $("img").each(function() { 
     if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) { 
      var src = $(this).attr("src"); 
      var suffix = src.substring(src.length - 6, src.length).split('.')[0]; 
      suffix = suffix.charAt(suffix.length - 1);    
      $(this).attr("src", "/static/images/generic/missing_" + suffix + ".jpg"); 
     } 
    }); 
}); 

Pro: può essere posizionato ovunque sulla pagina, correggerà le immagini non importa quando è in esecuzione, non rallenta l'utente Contro: mostra un'immagine rotta fino a quando non crea una scarsa esperienza utente

Nella mia situazione il tempo di caricamento è il problema più grande ma non riesco a ottenere l'ultima opzione per lavorare in IE correttamente come cambia rotta e nessuna immagine spezzata allo stesso modo!

Cheers, Denis

Answer 1

Un pensiero che non vengono in mente è quello di creare un gestore di immagini al vostro web server, vale a dire

<img src="fetchimage.aspx?name=test.jpg" alt="test" title="test" /> 

Ignorare l'aspx, ovviamente sarebbe sostituito con qualunque la tua tecnologia di scripting server preferita era. Questo gestore può quindi gestire nomi di immagini che non sono presenti consegnando il tuo missing.jpg per tutti i nomi di immagini sconosciute.

Oltre a ciò, si è bloccati con le opzioni fornite per quanto posso vedere. Qualsiasi javascript che viene eseguito prima che la pagina sia caricata rischia di non iterare sui tag img non ancora ricevuti e qualsiasi script che aspetta la pagina pronta rischia di far vedere all'utente le immagini non funzionanti.

Rock-> È < -Hardplace

Answer 2

A mio parere, utilizzando il tag alt è sufficiente e non c'è bisogno di aggiungere complessità alla pagina controllando ogni volta utilizzando JavaScript.

Ovviamente è necessario controllare ogni tanto che non si dispone di un'immagine interrotta. There are tools to do it.

Answer 3

Idealmente il tag alt dovrebbe essere usato. Se questo è di vitale importanza, la soluzione javascript in realtà non è l'ideale perché non funzionerà se JS è disattivato. Si potrebbe tuttavia fare una sorta di soluzione lato server. Qualcosa in PHP potrebbe essere fatto in questo modo, ma richiederebbe un database o una sorta di modo di impostare le variabili.

<?php 
if($image !== ''){?> 
<?php echo '<img src="$imgsrc" alt="$imgalt" />' ?> 
} 
<?php else { 
<?php echo '<img src="$imgmissing" alt="$imgalt" />' ?> 
} ?> 
<?php } ?>