Newsgroup: it.comp.lang.javascript
Titolo: [Principiante] Nascondere immagini in sito responsive

dopo aver provato su it.comp.www.html, provo qui, perché mi sembra il
posto più adatto.
 
Combinando un sito responsive, può emergere la necessità di nascondere
dalla visualizzazione dei dispositivi con schermo piccolo alcuni
elementi, per esempio immagini non strettamente necessarie.
 
Però non basta mettere
 
        img {display:none;}
 
poiché a quel che ho capito l'elemento non visualizzato viene ugualmente
caricato, con consumo di banda e di memoria soprattutto se si tratta di
pagine piuttosto lunghe (le mie pagine sono tutte piuttosto lunghe!).
 
Devo trovare un modo per aggirare il problema, che non mi sembra abbia
soluzione con le media queries.
 
Avevo quindi pensato di mettere nella pagina una roba tipo
 
        <img src="noImage.png" id="myImage">
 
dove noImage.png è un qualunque piripicchio di una manciata di byte,
giusto per non lasciare la dichiarazione vuota
 
        src=""
 
di un elemento img di cui ho dichiarato nel css "display:none" se lo
schermo è più piccolo di 768px.
 
Poi alla fine della pagina:
 
        <script>
        if (screen.width > 767) {
        document.getElementById("myImage").src="myImage.png";
        }
        </script>
 
dove myImage.png è l'immagine che deve comparire se lo schermo è almeno
largo 768 px, nel punto in cui <img> ora ha lo stile "display:block" o
quello che è.
 
Provando così alla buona, mi sembra che la cosa funzioni.
 
Voi avete qualche consiglio in proposito?
 
-- 
Maurizio Pistone    strenua nos exercet inertia  Hor.
 
http://blog.mauriziopistone.it
 
 
http://www.lacabalesta.it
 
 
http://blog.ilpugnonellocchio.it
 

 Provando cosě alla buona, mi sembra che la cosa funzioni.
 
A occhio mi sembra possa andare, ma ti indico una strada alternativa.
 
Da qualche tempo, il tag <img> puň essere quasi sempre sostituito da un altro
tag il cui background contenga un'immagine; questo perché ormai tutti i browser
in circolazione interpretano degnamente l'istruzione css:
 
background: url('images/immagine.png') no-repeat.
 
E dunque, visto il tipo di esigenza, perché non sostituire tutti i tag img con
dei div? Se ritieni di poterlo fare, carica un foglio di stile per il
dispositivo A e un altro per quello B.
 
if (screen.width > 768) {
document.write('<link rel="stylesheet" type="text/css" href="A.css" />');
} else {
document.write('<link rel="stylesheet" type="text/css" href="B.css" />');
}
 
[il document.write č vecchio come il cucco, magari oggi si puň fare
diversamente, ma qui bisogna intervenga una persona piů aggiornata del
sottoscritto]
 
 
In A:
 
div.myImages {
display: inline-block; /* o quel che ti sembra piů idoneo */
}
 
.foto_cane {
background: url('images/cane.png') no-repeat left;
width: 800px;
height: 800px;
}
 
.foto_gatto {
background: url('images/gatto.png') no-repeat left;
width: 600px;
height: 500px;
}
 
 
In B
 
div.myImages {
display: none;
}
 
.foto_cane {
background: none;
}
 
.foto_gatto {
background: none;
}
 
Nell'html:
 
<div class="myImages foto_cane"></div>
<div class="myImages foto_gatto"></div>
 
Come la vedi?
 
-- 
mailto: y = i
------------------------------------------------------
http://www.catarsi.it
 
Vivo nel terrore di non essere frainteso (Oscar Wilde)

 tag il cui background contenga un'immagine
 
questa soluzione mi era stata suggerita sull'altro gruppo, ma non mi
convince
 
HTML si evolve sempre di più in senso semantico, è vero che si può fare
tutto, ma un'immagine è un'immagine, uno sfondo è uno sfondo
 
non si tratta solo di formalismi, se tu cominci a seguire un certo
percorso poi rimani lì, e ad ogni successivo intervento devi ricordarti
che quella che dovrebbe essere un'immagine l'hai trattata come sfondo e
regolarti di conseguenza
 
per esempio, in un sito responsive una cosa banale è dover cambiare la
dimensione dell'immagine a seconda della dimensione dello schermo, la
cosa più ovvia è impostare la dimensione in percentuale dell'elemento
contenitore, forse si può fare anche con uno sfondo, ma già si deve fare
un ragionamento non proprio intuitivo
 
io ho preso l'abitudine di inserire le immagini dentro l'elemento
<figure>, col suo bravo <figcaption>; col ragionamento del div che ha
uno sfondo mi troverei una pagina zeppa di <div id... class...> e dopo
un po' chi ci capisce è bravo


 tutto, ma un'immagine è un'immagine, uno sfondo è uno sfondo
 
Certo certo, condivido tutto, anche le parti non quotate. La mia era una
soluzione alternativa al tuo "carico un'immagine leggerissima e - quando
è il caso - la rimpiazzo via javascript". Non sapevo ti avessero già
dato lo stesso suggerimento, tantomeno immaginavo che l'idea non ti
convincesse.
 
In bocca al lupo.


 tutto, ma un'immagine è un'immagine, uno sfondo è uno sfondo
 
Sì, è vero, ma il tag apposito per fare quello che vuoi (<img srcset...>) 
non è ancora supportato. O meglio, inizia a essere supportato dagli ultimi 
browser, ma finché la gente non li aggiorna non lo puoi usare.
 
Le alternative sono appunto il background-image in css o un tag <img> 
"farlocco" con un po' di data-qualcosa e un pezzo di js che lo renda 
responsive.
 
Bye.