Web mobile: rilevamento di quando le immagini sono state disabilitate

Question

Ho riscontrato un problema molto fastidioso per il Web mobile. Il sito Web che ho utilizza le immagini per la maggior parte dei pulsanti, sia <a href="..."><img> e <input type='image'>. Di conseguenza, se l'utente disattiva le immagini, il sito Web non solo non sembra buono, ma perde anche tutte le capacità di navigare nel sito. In particolare, Android non visualizza le informazioni alt sulle immagini, quindi non c'è praticamente nulla da suggerire alle immagini che non vengono visualizzate.

C'è un modo per determinare se un browser ha disabilitato le immagini senza usare JavaScript? Mi piacerebbe visualizzare un sito ottimizzato per il testo più generico se lo hanno disabilitato.

Answer 1

Senza utilizzare alcun JavaScript? Temo che non sia possibile, almeno dal lato del cliente.

In HTML sono presenti tag NOFRAME e NOSCRIPT, ma nessun tag equivalente per immagini, il cui contenuto verrà visualizzato solo se le immagini sono disabilitate o non supportate.

Quindi per i tag A che avvolgono un'immagine, è possibile che il tag A, anziché l'immagine, sia responsabile della visualizzazione del suggerimento e della gestione degli eventi.

Inoltre, per garantire che il layout non si interrompa se le immagini non vengono caricate, è possibile assegnare al tag A l'altezza e la larghezza normali dell'immagine. La stessa cosa funzionerebbe anche con i tag <input type='image'> racchiudendoli in un tag span e assegnandogli valori di attributo corretti.

Ad esempio:

<a href="..." style="height: 25px"; width: 80px;" title="Some tooltip text"> 
    <img...> 
</a> 

<span onclick="some action" style="height: 30px"; width: 70px;" title="Some other tooltip text"> 
    <input type='image'...> 
</span>