Caricare immagini solo alla fine

[Gelion]

ho alcune immagini in mezzo all'html ma vorrei venissero caricate solo quando tutto il resto si è caricato.. è possibile creare questo vincolo?

[artorius]

mmm a dire il vero È già così:

il browser carica la struttura DOM (l'HTML insomma), la completa con i CSS importati nella pagina, e poi carica i Multimedia/part (Immagini, Video, Embed, etc) in ordine di inserimento nella pagina.

Se vuoi qualcosa di particolare, sii più preciso.

[Gelion]

dato che ho (invento) 10 immagini da 500kb nella pagina vorrei che solo la priam venisse caricata da sola subito e le altre solo dopo che TUTTO è stato caricato

[artorius]

Cioè avere tipo l'immagine Loading e che le immagini si carichino in maniera asincrona DOPO il caricamento della pagina?

[Gelion]

anche senza immagine di loading

[artorius]

Ok, allora fai così: inserisci le immagini con una notazione diversa, mettendo il path all'immagine corretta nell'alt, anziché nel src, mentre nel src metti il path all'immagine di loading

[img]imgs/loading.gif[/img]
[img]imgs/loading.gif[/img]
[img]imgs/loading.gif[/img]
[img]imgs/loading.gif[/img]
[img]imgs/loading.gif[/img]
[img]imgs/loading.gif[/img]

Poi crei una funzione per generare degli oggetti Image con i quali caricare i path contenuti negli alt:

var imgs = [];
var allImgs;
window.onload = function(){
  allImgs = document.getElementsByTagName('img');
   for(i = 0; i < allImgs.length; i++){
      if(allImgs[i].className == 'Async'){
         var img = new Image();
         img.onload = function(){
             for(j = 0; j < allImgs.length; j++){
                if(this.src.indexOf(allImgs[j].alt) != -1){
                   allImgs[j].src = this.src;
                   break;
                }
             }
         }
         img.src = allImgs[i].alt;
      }
   }
}

Nota che per identificare le immagini da cambiare uso la classe "Async".

Se hai domande sulla funzionalità fai pure.