Corsi on-line

Gestire gli errori di caricamento delle immagini con jQuery

Come è noto, i vari browser reagiscono in modo diverso nel caso del mancato caricamento di un’immagine, alcuni mostrano un punto interrogativo (“?”) nell’area in cui avrebbe dovuto comparire la risorsa, altri evitano di visualizzare elementi sostitutivi; si tratta in effetti di una gestione lato client non uniforme in quanto stabilita dagli sviluppatori dei vari vendor. Un errore a livello di caricamento può essere però intercettato da jQuery e per questo motivo personalizzato dall’utilizzatore in modo che venga generato un unico evento uguale per tutti i programmi di navigazione.

jQuery

Negli esempi proposti in questo breve articolo vedremo come, attraverso il noto framework JavaScript, sia possibile generare un gestore di eventi da associare alle immagini presenti in una pagina Internet; esso si occuperà di rilevare gli errori di caricamento e di generare dei comportamenti conseguenti. Lo sviluppatore potrà per esempio decidere di sostituire l’immagine non caricata con un’altra definita di default, ad esempio un placeholder, oppure di nascondere la divbox destinata a contenere l’immagine stessa.

Nel primo caso sarà possibile utilizzare una semplice soluzione come la seguente che intercetterà l’errore di caricamento passando all’attributo src la risorsa sostitutiva:

$('img').error(function(){
        $(this).attr('src', 'placeholder.png');
});

Per quanto riguarda il secondo caso, potremo utilizzare jQuery e sfruttare la funzione .hide() per nascondere un div quando esso risulti vuoto:

$("img").error(function(){
        $(this).hide();
});

La scelta del metodo utilizzato dipenderà plausibilmente dal layout adottato per le proprie pagine e dall’area scelta per l’eventuale caricamento dell’immagine gestita.

Post correlati
I più letti del mese
Tematiche