L'immagine verrà caricata per il valore di visibilità impostato come nascosto al caricamento della pagina? - javascript, html, html5, css3

Sono nuovo di javascript. Mi piacerebbe sapere come funziona il caricamento. Supponiamo che nella mia pagina html io abbia un'immagine la cui visibilità sia impostata come nascosta. Ho un pulsante che su clic imposta la proprietà di visibilità dell'immagine a visbile usando javascript. Quando la pagina viene caricata, l'immagine verrà caricata o verrà caricata quando si fa clic sul pulsante.
Mi piacerebbe conoscere la proprietà display il cui valore è impostato come none.
Grazie in anticipo.

risposte:

6 per risposta № 1

In entrambi gli scenari le immagini sarà caricato (indipendentemente se è possibile vedere o meno l'immagine dovutaper visibilità o visualizzazione). La differenza tra visibilità e visualizzazione è fondamentalmente sullo "spazio" che l'elemento occuperà nella pagina. Con la visibilità l'elemento manterrà quello spazio anche se è nascosto. Con display l'elemento non manterrà lo spazio, altri elementi saranno in grado di occupare quello spazio.

Se non vuoi che l'immagine sia caricata e tuvoglio iniziare a caricare solo quando il pulsante viene premuto, quindi un bel trucco per farlo è impostare l'attributo IMG src su "data:" o "about: blank" e poi modificarlo sul pulsante clic. In questo modo "ingannerai" il browser e non caricherà l'immagine al caricamento della pagina.

Spero che questo ti aiuti

---

1 per risposta № 2

Quando la pagina si carica, l'immagine verrà caricata e sarà nascosta. Nel tuo pulsante clicca la sua proprietà di stile diventa mostra significa visibile.

Se imposti lo stile display:none; sarà nascosto;

---

0 per risposta № 3

Finché il tag img è nel DOM, caricherà la risorsa; il CSS determinerà se viene effettivamente visualizzato o meno. Se stai usando o meno visibility: hidden; o display:none; non influenzerà questo.

La differenza principale è se l'immagine occuperà o meno uno spazio nella pagina; un elemento impostato su display: none; non è reso affatto, mentre un elemento impostato su visibility: hidden; occuperà ancora lo spazio impostato dal suo modello di scatola.

Puoi vedere questo in azione qui: http://jsfiddle.net/d8NrK/

---

0 per risposta № 4

La migliore è usare la proprietà display del CSS per controllare la visibilità e lo spazio che occupa.

document.getElementById( "elemtId" ).style.display = "none";

o usare jquery per semplificare il codice.

 $("#elementId").hide();
$("#elementId").show();

oppure usa $ ("# elementId"). toggle ();

Ref: - http://www.w3schools.com/jquery/jquery_hide_show.asp

---

0 per risposta № 5

Il browser carica tutte le immagini che ha src attributo.so uso data-src. Ecco cosa puoi fare

<img class="hidden" data-src="/images/url/to/image.jpg" />
(function($){
$.fn.reveal = function(){
var args = Array.prototype.slice.call(arguments);
return this.each(function(){
var img = $(this),
src = img.data("src");
src && img.attr("src", src).load(function(){
img[args[0]||"show"].apply(img, args.splice(1));
});
});
}
})(jQuery);

Ora chiama questa funzione quando ne hai bisogno.

L'aggiornamento al mio codice è Qui

---