Newsgroup: it.comp.www.html
Titolo: display:none in siti responsive

però da quel che ho capito se si applica la proprietà ad un'immagine
questa viene ugualmente caricata
 
suggerimenti?
 
-- 
Maurizio Pistone    strenua nos exercet inertia  Hor.
 
http://blog.mauriziopistone.it
 
 
http://www.lacabalesta.it
 
 
http://blog.ilpugnonellocchio.it
 
--
Newsgroup robomoderato - gli articoli vengono approvati automaticamente

 suggerimenti?
 
Dipende cosa rappresenta l'immagine, ma se può essere nascosta direi che 
non è parte del contenuto, quindi io la metterei come background-image 
nei css, e la caricherei solo nella giusta media-query.
 
Bye.


 nei css, e la caricherei solo nella giusta media-query.
 
è una buona idea
 
solo che non mi trovo tanto ad usare un'immagine di background come
un'immagine normale
 
devo impostare un elemento delle giuste dimensioni che abbia quel
background, poi probabilmente regolare le dimensioni dell'immagine a
seconda del dispositivo (nessuna immagine sul telefonino, immagine
ridotta sul tablet, immagine in formato pieno sul computer)
 
volendo si può fare tutto, ma mi sembra un po' macchinoso
 
-- 
Maurizio Pistone    strenua nos exercet inertia  Hor.
 
http://blog.mauriziopistone.it
 
 
http://www.lacabalesta.it
 
 
http://blog.ilpugnonellocchio.it
 


visto che nessuno ha altre idee, ci riprovo:
 
dopo aver posto come breakpoint per la visualizzazione dell'elemento img
per esempio 768 px, nella pagina metto 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 "display:none".
 
Poi alla fine della pagina:
 
        <script>
 
        if (screen.width > 768) {
        document.getElementById("myImage").src="myImage.png";
        }
 
        </script>
 
dove myImage.png è l'immagine che deve comparire se lo schermo è almeno
largo 768 px, dove <img> ha lo stile "display:block" o altro
 
In questo modo posso trattare l'immagine come una vera immagine, senza
arrampicarmi sui vetri mortali facendo finta che sia un background.
 
Tenete conto che nel mio caso si tratta di pagine piuttosto lunghe, con
parecchie immagini che sul telefonino non si devono vedere, invece su
schermi più grandi sì, quindi differire il caricamento delle immagini
dopo il caricamento della pagina credo che mi faccia comunque comodo.
 
Vi sembra una buona idea?


E' un rimedio a quello che vuoi fare, questo si, ma come soluzione in generale
preferirei evitare di coinvolgere JavaScript nel gestire il RWD,
che č compito specifico dei CSS. Purtroppo al momento ancora non
esiste uno standard certificato e raccomandato per gestire il
caricamento di immagini con peso minore nei device mobili, per cui
ci si deve arrangiare. Esistono alcune soluzioni proposte ma
nessuna ancora č stata eletta a standard.


 che è compito specifico dei CSS
 
non credo però che esistano delle vere controindicazioni, bene o male un
po' di JS lo devo usare perfino io che non ne so quasi nulla, per
operazioni tutto sommato banali
 
proseguirò il trèd sul gruppo apposito
 
-- 
Maurizio Pistone    strenua nos exercet inertia  Hor.
 
http://blog.mauriziopistone.it
 
 
http://www.lacabalesta.it
 
 
http://blog.ilpugnonellocchio.it
 


 operazioni tutto sommato banali
 
Quello che ciccio intende è che non è la cosa migliore.
Per esempio, per funzionare bene, la tua soluzione la devi infilare in un 
 
$(window).on('resize', function() { ...});
 
(uso jQuery per semplificare, ma spero si capisca). Il che significa che 
viene lanciato e intercettato l'evento per ogni pixel di resize della 
finestra.
 
In CSS è più efficiente (più fluido e sul mobile usa meno batteria).
 
Anche la soluzione in css ha i suoi problemi (per esempio se vuoi rendere 
fluida l'immagine e supportare vecchi browser, il background-size potrebbe 
non funzionare).
 
Insomma, ci sono diverse soluzioni. Tutto sta a trovare quella che si 
adatta meglio alla situazione.
 
Bye.


 finestra
 
il mio problema non è il resize
 
-- 
Maurizio Pistone    strenua nos exercet inertia  Hor.
 
http://blog.mauriziopistone.it
 
 
http://www.lacabalesta.it
 
 
http://blog.ilpugnonellocchio.it
 


 il mio problema non è il resize
 
Se il sito deve essere responsive, il resize è SEMPRE un tuo problema. :)
 
Bye.
