Gestione immagini non va alla prima carica

**Francesco95** · 23-03-2015, 23:21

Allora tramite JS gestisco 6 div che contengono delle immagini (immagini che carico dinamicamente e che aggiorno (pagine galleria +/-) con appunto js)... dato che le immagini non sempre sono quadrate tramite js le centro nei div (quadrati) aggiustando la classe (verticale->height 100%, orizzontale->width:100%) e il top (per centrare immagini orizzontali nei div)...
IL PROBLEMA:
alla prima carica della pagina le immagini risultano sfasate, come se venissero lette come vuote, la mia impressione (magari mi sbaglio), è che il browser non faccia in tempo a caricarle che viene eseguito il codice che le ridimensiona in base alle loro dimensioni, infatti ad esempio il top alla prima carica risulta circa metà del div (ovvero come se l'altezza dell'immagine fosse 0 dato che calcolo il top come (divheight - img.offsetheight)/2...
Se poi faccio un refresh manuale della pagina tutto sembra magicamente funzionare... è come se il browser se le salvasse nella cache e sapesse già le dimensioni...
Ripeto, magari è solo una mia idea...
Cosa può essere?

Parte del codice che gestiste la galleria è questa:

codice:

        function misuraImmagine(immagine){
            
            if (immagine.height > immagine.width){
                
                return("imgvert");
                
            } else {
                
                return("imgoriz");
                
            }
            

        }

        function centraImmagini(){
            
            var posimg;
            var posdiv;
            
            for (var i=1;i<7;i++){
                
                posimg=document.getElementById("img"+i);    
                
                posimg.style.top="0px";
                
                if (posimg.className=="imgoriz"){


                    posdiv=document.getElementById("divimg"+i);


                    posimg.style.top=(posdiv.offsetHeight-posimg.offsetHeight)/2+'px';    
                    
                    
                }
                
            }            
            
        }

**cavicchiandrea** · 24-03-2015, 05:35

Hai provato ad eseguire le funzioni dentro ad onload?
Potrebbe essere (molto probabile) un problema di caricamento, fin quando le immagini non sono completamente caricate hanno valori a 0. Soluzione preload di immagini cioè devi pre cacaricare le immagini nel documento trovi diversi script in rete

**Francesco95** · 24-03-2015, 14:07

Grazie per la risposta, allora ho cercato un po' e ho cercato di adattare il codice alla mia pagina:

Ma non funziona lo stesso

**cavicchiandrea** · 24-03-2015, 16:17

Non ho altre soluzioni veloci, bisognerebbe studiarsi il progetto, oppure prendere in considerazione di avere tutte immagini uguali, cioè quando fai upload fai anche il resize

**Francesco95** · 24-03-2015, 16:56

E io il progetto lo sto studiando (l'ho fatto io...), ma non saprei come riparare...
Un primo dubbio è: basta inserire gli src in una variabile che a fine funzione verrà rilasciata per caricare le immagini nella cache del browser?
Le animazioni (tipo transition height e opacity che uso) posso influenzare la cosa?
In che senso quando faccio upload faccio resize?
Dici che per ogni immagine devo aprire PS o equivalente per ritagliare l'immagine a quadrato e fare quindi due versioni?

**Vindav** · 24-03-2015, 17:32

Non sto a modificare il tuo codice che è parecchio incasinato (e direi anche obsoleto, l'uso di eval per convertire in numero non si può proprio vedere), quindi ti faccio un esempio.

Mettiamo che la variabile imgArray contega tutte le immagini:

for(i=0;i<imgArray.length;i++){
imgArray[i].onload = centraImmagine.bind(this, i);
}

Cosi facendo la funzione centraImmagine verrà richiamata solo quando l'immagine è stata completamente caricata. Nella funzione centraImmagine dovrai centrare quella singola immagine passata in input, quindi sarà qualcosa del genere:

function centraImmagini(index){
var posimg;
var posdiv;

posimg=document.getElementById("img"+index);
posimg.style.top="0px";

if (posimg.className=="imgoriz"){
posdiv=document.getElementById("divimg"+index);
posimg.style.top=(posdiv.offsetHeight-posimg.offsetHeight)/2+'px';
}
}

**Francesco95** · 24-03-2015, 20:50

Mhm quindi dici di inserire nella funziona popolaImmagini dopo l'aggiornamento dell'src qualcosa tipo:
posimg.onload=centraImmagine(), giusto?
A questo punto tolgo il preload no?

Ps l'eval l'ho messo perchè senza non funzionava... pensavo che lo convertisse da solo in numero dato che lo era ma non lo faceva quindi...

**Vindav** · 25-03-2015, 12:42

va bene inserire l'istruzione nella funzione popolaImmagini, ma devi usare quella che ti ho suggerito, il preload per ora levalo

**Francesco95** · 25-03-2015, 14:07

Grazie! mettendo sull'onload funziona, stavo diventando matto!
E per il discorso dell'eval cosa avrei dovuto fare?

**Vindav** · 25-03-2015, 14:31

due alternative:
http://www.w3schools.com/jsref/jsref_number.asp
http://www.w3schools.com/jsref/jsref_parseint.asp

Discussione: Gestione immagini non va alla prima carica

Strumenti discussione

Ricerca discussione

Visualizza

Gestione immagini non va alla prima carica

Permessi di invio