[Principiante] Nascondere immagini in sito responsive

[Maurizio Pistone]

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

[Catarsi]

Non vedo interventi di esperti, quindi accontentati del mio (che esperto proprio
non sono).

Maurizio Pistone <scri...@mauriziopistone.it> wrote:

> if (screen.width > 767) {
> document.getElementById("myImage").src="myImage.png";
> }

> 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.

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)

[Maurizio Pistone]

Catarsi <marcoc...@tiscaly.it> wrote:

> Da qualche tempo, il tag <img> può essere quasi sempre sostituito da un altro

> 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

[Catarsi]

Maurizio Pistone <scri...@mauriziopistone.it> wrote:

> > Da qualche tempo, il tag <img> può essere quasi sempre sostituito da un
> > altro 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

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.

[Alessandro Pellizzari]

Il Sun, 12 Apr 2015 15:19:52 +0200, Maurizio Pistone ha scritto:

> HTML si evolve sempre di più in senso semantico, è vero che si può fare
> 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.