Preload di immagini

[ZIOLele]

siccome non sono molto preparato in materia, non è che qualche anima pia mi spiega in parole povere ( vanno bene anche link che rimandano a spiegazioni) come gestire un preload di immagini da fare sotto ad un layer che nasconde tutto, e far sparire il detto layer solo dopo che ho testato l'effettiva presenza delle immagini?

Io ho pensato di utilizzare l'evento onload delle singole immagini e fargli settare una variabile di controllo una cosa tipo:

img.src="path"
img.onload = caricata++
img1.src="path1"
img1.onload = caricata++

while (caricata < totimg) {}

div1.style.visibility="hidden"

Però sinceramente ho qualche dubbio che funzioni... secondo voi?

[Mich_]

Non so neppure io se puo` funzionare, ma ci sono delle modifiche da fare.

Anzitutto img e` parola riservata, per cui non puo` essere nome di variabile.

Poi io prverei cosi`:

var caricata = 0;

function increm() {
  caricata++;
}

var img1 = new Image();
img1.onload = increm;
img1.src = "path";
var img2 = new Image();
img2.onload = increm;
img2.src = "path";
...

Notare che non c'e` la parentesi nella funzione chiamata dall'onload.

Ciao
Michele

[ZIOLele]

Ho provato, e funziona alla grande :metallica

il risultato finale è questo (casomai possa tornare utile,anche se va adattato):

var caricate = 0;
				
function checkload(){
   caricate++;
   var barracaricamento = document.images['barra'];
   barracaricamento.style.width = (caricate*50);
}
		
function inmezzo(object){
   var resx;
   var deltax;
   var resy;
   var deltay;
			
   var centra = document.getElementById(object);
				
   resx =(self.innerWidth)?self.innerWidth:document.body.clientWidth;
   resy =(self.innerHeigth)?self.innerHeigth:document.body.clientHeigth;
   if (resx > 780){
      deltax=(resx-780)/2;
   }
   else{
      deltax = 0;
   }
   if (resy > 460){
      deltay=(resy-460)/2;
   }
   else{
      deltay = 0;
   }
   centra.style.left=deltax+"px";
   centra.style.top=deltay+"px";
}
		
function controlla(){
   if (caricate >= document.images.length) location.replace('index2.aspx');
   else setTimeout('controlla()',1000);
}
		
function caricaImg(object){
   inmezzo(object);		
   var immagini = new Array();
   for(n=0;n<caricaImg.arguments.length;n++){
      immagini[n]=new Image();
      immagini[n].src=caricaImg.arguments[n];
      immagini[n].onload = checkload;
   }
   controlla();
}

Questa cosa qua sopra centra un oggetto nella pagina, fa il preload delle immagini, visualizza una barra per capire quanto manca, e alla fine manda sulla pagina delle immagini :gren:

[mascalzone]

ciao.....cercavo qualcosa per fare il preload di un immagine....
ho fatto una ricerca....e questo scriptino mi sembra adatto...

però do 2 domandine da fare....

Qualcuno potrebbe spiegarmi.....

ma in ke modo specifico l'immagine dove voglio fare il preload??

e come rikiamo questo script per l'immagine su cui voglio fare il preload??

grazie 1000....ciao

[mascalzone]

up :quote:

[ZIOLele]

ok, ora ti spiego:

var caricate = 0;
var larghtot = 200;
var largun = 0;
				
function checkload(){
  caricate++;
  var barracaricamento = document.images['barra'];
  barracaricamento.style.width = (caricate*largun);
}
		
function inmezzo(object){
  var resx;
  var deltax;
  var resy;
  var deltay;
		
  var centra = document.getElementById(object);
				
  resx =(self.innerWidth)?self.innerWidth:document.body.clientWidth;
  resy =(self.innerHeigth)?self.innerHeigth:document.body.clientHeigth;
  if (resx > 780){
     deltax=(resx-780)/2;
  }
  else{
     deltax = 0;
  }
  if (resy > 460){
     deltay=(resy-460)/2;
  }
  else{
     deltay = 0;
  }
  centra.style.left=deltax+"px";
  centra.style.top=deltay+"px";
}
		
function controlla(){
   if (caricate >= document.images.length) location.replace ('index2.aspx');
   else {
      for (i=0;i<document.images.length;i++){
	if (document.images[i].complete) caricate ++
      }
      setTimeout('controlla()',1000);
   }
}
		
function caricaImg(object){
   inmezzo(object);		
   var immagini = new Array();
   largun = (larghtot/caricaImg.arguments.length);
   for(n=0;n<caricaImg.arguments.length;n++){
      immagini[n]=new Image();
      immagini[n].src=caricaImg.arguments[n];
      immagini[n].onload = checkload;
   }
   controlla();
}

allora la funzione che ti interessa è caricaImg() questa funzione prende come argomenti l'oggetto object (che viene passato direttamente alla funzione inmezzo() che serve solo a centrarlo nella pagina) e una serie arbitraria di immagini di cui fa il preload (e ti mostra pure una simpatica barra di caricamento), ti fa andare oltre solo quando le immagini sono caricate.Per far funzionare bene il tutto ricordati di creare un oggetto <img> e di specificargli come parametro name="barra" (è la barra per il caricamento) altrimenti lo script non funziona) se non ti interessa il centramento modifica lo script eliminando la funzione inmezzo e il riferimento object da caricaImg(). In altre parole la firma di carica img deve diventare caricaImg() e non caricaImg(object) e da dentro caricaImg togli pure le riga inmezzo(object); . Per richiamare il tutto fai così:
<body onload="caricaImg('path_img1','path_img2',...,'pat h_imgN')">

Buon lavoro

[mascalzone]

:quote:

Originariamente inviato da ZIOLele
...
Per far funzionare bene il tutto ricordati di creare un oggetto <img> e di specificargli come parametro name="barra" (è la barra per il caricamento) altrimenti lo script non funziona
...

scusate l'ingnoranza ma.....
dove e come si dichiara l'oggetto <img> ?

se io ho un'immagine e voglio pare il preload....
come faccio????
es.
[img]foto.jpg[/img]

grazie...per la pasienza

[ZIOLele]

Originariamente inviato da mascalzone
:quote:



scusate l'ingnoranza ma.....
dove e come si dichiara l'oggetto <img> ?

Scusa, sono io che ho la tendenza ad identificare tutto come un'oggetto... per oggetto img intendevo un tag <img> dove metti come parametro name="barra", in pratica:

[img]pinco.jpg[/img]

Originariamente inviato da mascalzone
:quote:


se io ho un'immagine e voglio pare il preload....
come faccio????
es.
[img]foto.jpg[/img]

grazie...per la pasienza

scrivi nel body:
onLoad="caricaImg('path/di/foto.jpj'), se sono più foto:
onLoad="caricaImg('path/di/foto.jpg','path/di/foto1.jpg')

in pratica viene così:
<body onLoad="caricaImg('path/di/foto.jpg','path/di/foto1.jpg')>