sostituire "onload" nel tag <img> con Js

acweb-2004

Utente Attivo
7 Giu 2006
133
0
16
Monza
www.acweb-2004.it
ciao a tutti

sto migrando da HTML a XHTML, ma ho un problema che da gg nn riesco a risolvere...

nel codice html ho una immagine (più immagini di diverse dimensioni, la prima caricata con la pagina web, le altre al click su anteprime) che a fine caricamento deve eseguire una funzione Js per acquisire le sue dimensione e posizionarla nella pagina web.

il codice che usavo è questo:
Codice:
<img src="#" id="bigimgid" style="position:absolute;left:0px;top:0px;" onload="finecaricimg()">
ora poichè XHTML nn vuole onload nel tag img ho provato questa soluzione:
Codice:
<div id="showimg" >
    <img src="#" id="bigimgid" style="position:absolute;left:0px;top:0px;" alt="" />
</div>
<script type='text/javascript'>
<!--
if (document.getElementById) {
var img = document.getElementById('bigimgid');
if (img) img.onload = finecaricimg();
}
//-->
</script>
NON funziona, con degli alert nella function finecaricimg mi sono accorto che width e height non sono caricati, come se la funzione venisse richiamata prima del termine di caricamento dell'immagine.
Ho provato mettere il richiamo della funzione nell'onload del body, ma uguale risultato. Probabilmente onload del body viene eseguito a fine caricamento codice html????????....

ho poi provato con questo codice:
Codice:
<div id="showimg" >
    <img src="#" id="bigimgid" style="position:absolute;left:0px;top:0px;" alt="" />
</div>
<script type='text/javascript'>
<!--
document.images[document.images.length-1].onload = finecaricimg();
//-->
</script>
ma anche in questo caso il risultato è come i precedenti!

come posso fare, dove c'è l'errore?

grazie

augusto
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao, prova a richiamare la funzione al caricamento della pagina
Codice:
window.onload = function(){finecaricimg();};
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Non so cosa fa finecaricimg(), ma, ho provato cosi e funziona.
HTML:
<script type='text/javascript'>
    window.onload = function(){finecaricimg();};
    function finecaricimg() {
        var img = document.getElementById("bigimgid");
        img.src = "img/img.jpg";
        img.style.left = "500px";
        img.style.top = "100px";
    }
</script>
<img src="#" id="bigimgid" style="position:absolute;left:0px;top:0px;" alt="" />
 

acweb-2004

Utente Attivo
7 Giu 2006
133
0
16
Monza
www.acweb-2004.it

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Il problema è in questa sintassi
Codice:
document.bigimgid.width
scrivendo cosi IE va a cercare un elemento con name "bigimgid", non lo trova e va in errore
o aggiungi il name all'immagine o usi questa sintassi
Codice:
document.getElementById("bigimgid").width
 

acweb-2004

Utente Attivo
7 Giu 2006
133
0
16
Monza
www.acweb-2004.it
Codice:
document.getElementById("bigimgid").width
quelle due istruzioni erano così perchè prima usavo name, poi ho cmbiato per xhtml ed ho usato id.
comunque anche con quella modifica nn va, messo in rete

grazie

ciao

ps: la console di Fx nn da errori

ps1: ho messo un alert dopo l'acquisizione della width ed ottengo 0!
 
Ultima modifica:

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
hai dimenticato di cambiare anche questo
Codice:
document.bigimgid.src = urlimg;
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
la funzione che gli assegna il src non è la stessa dei margini
se guardi l'html generato da firebug
<img id="bigimgid" alt="" style="position: absolute; left: 0px; top: 0px; margin-top: 192px; margin-left: 250px; opacity: 1;" src="#">
puoi vedere che i margini sono stati settati come indicato nella funzione finecaricimg()
Codice:
document.getElementById('bigimgid').style.marginTop=top_img + "px";
document.getElementById('bigimgid').style.marginLeft=left_img + "px";
ma non gli viene assegnato il src perchè sicuramente la funzione elaboraimgac(urlimg) viene richiamata prima del caricamento della pagina e quindi anche dell'immagine
 

acweb-2004

Utente Attivo
7 Giu 2006
133
0
16
Monza
www.acweb-2004.it
mi sto perdendo, ricapitoliamo:

1) caricamento iniziale pagina: la funzione "finecaricimg()" viene richiamata dall'onload del tag img oppure da Js (se si omette onload da img). Il caricamente dell'immagine è il tag img
2) al click su una immagine di anteprima parte la funzione di "visualizzaimgac('images/accessori/img01cs.jpg')", che ritardando richiama il caricamento dell'immagine tramite elaboraimgac(urlimg), poi parte anche finecaricimg(), probabilmente perchè legato al tag img

provo a guardare firebug, ma nn l'ho mai usato....
comunque ho messo anche l'alert del margin left
prova a confrontare i valori di casseto (errati) e cassetto1 (giusti) quest'ultimo è con onload nel tag img
con js (mi sembra ormai evidente, ma nn si sa mai?) la funzione di fine caricamento viene eseguita prima che il caricamento dell'immagine sia terminato, per cui risulta width = 0 e height = 0


HO SBAGLIO????

grazie
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Secondo me sbagli :
width è = 0 perchè nell'attributo src dell'immagine non c'è nessun percorso
 

acweb-2004

Utente Attivo
7 Giu 2006
133
0
16
Monza
www.acweb-2004.it
ho mal di testa, riprendo domani

nell'immagine non c'è percorso, ma questo vale sia se uso onload che se uso js

devo capire per bene la logica di funzionamento iniziale

poi se nn ne vengo a capo lascerò l'errore di validazione e pazienza....

grazie

buona notte
 

acweb-2004

Utente Attivo
7 Giu 2006
133
0
16
Monza
www.acweb-2004.it
la logica iniziale al caricamento pagina è questa:
<body onlaod="visualizzaimgac('images/accessori/img01cs.jpg')"
per cui src c'e
questa funzione fa caricare l'immagine in differita via elaboraimgac(urlimg) che contiene: document.getElementById('bigimgid').src = urlimg;

inizia il caricamento dell'immagine, se nel tag img c'è onload alla fine del caricamento parte la funzione finecaricimg() che fa i calcoli di posizionamento e visualizza vari div
evidentemente il Js che sostituisce onload ha una sequenza temporale che confligge con questa logica.......

notte
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Non avevo fatto caso al tag body
puoi provare cosi: togli tutte le funzioni dal tag body e le metti in ordine nella head
HTML:
<head>
        <script>
            window.onload = function(){
                foto_mensola();
                MM_changeProp('accessori_over','','style.visibility','visible','LAYER');
                testo_acc();
                visualizzaimgac('images/accessori/img01cs.jpg');
                finecaricimg();
                larghezza_anteprime(403);
                altezza_testo(200);
                checkVersionIE();
            }
        </script>
    </head>
 

acweb-2004

Utente Attivo
7 Giu 2006
133
0
16
Monza
www.acweb-2004.it
NO, nn va
penso che si potrebbe provare cosi:
Codice:
    //  gestisco le dimensioni ed il posizionamento del div che contiene l'immagine di attesa
function elaboraimgac(urlimg) {
	document.getElementById('dattesa').style.filter = "alpha(opacity:"+90+")";
	document.getElementById('dattesa').style.MozOpacity = 90/100;
	document.getElementById('dattesa').style.KHTMLOpacity = 90/100;
	document.getElementById('dattesa').style.opacity = 90/100;
	MM_changeProp('dattesa','','style.visibility','visible','LAYER');      //  rendo visibile il div con l'animazione di attesa
	document.getElementById('bigimgid').src = urlimg;      //  carico l'immagine
        qui Js per richiamare la funzione di finecaricimg(), in questo momento la url c'è! ---  cosa scrivo??????
}
grazie

ciao
 

acweb-2004

Utente Attivo
7 Giu 2006
133
0
16
Monza
www.acweb-2004.it
così sembra funzionare, e pare anche corretto come codice!?
Codice:
    //  gestisco le dimensioni ed il posizionamento del div che contiene l'immagine di attesa
function elaboraimgac(urlimg) {
	document.getElementById('dattesa').style.filter = "alpha(opacity:"+90+")";
	document.getElementById('dattesa').style.MozOpacity = 90/100;
	document.getElementById('dattesa').style.KHTMLOpacity = 90/100;
	document.getElementById('dattesa').style.opacity = 90/100;
	MM_changeProp('dattesa','','style.visibility','visible','LAYER');      //  rendo visibile il div con l'animazione di attesa
	document.getElementById('bigimgid').src = urlimg;      //  carico l'immagine
	document.getElementById('bigimgid').onload = finecaricimg();
}
grazie

ciao
 

acweb-2004

Utente Attivo
7 Giu 2006
133
0
16
Monza
www.acweb-2004.it
così sembra funzionare, e pare anche corretto come codice!?
ERRORE, nn funziona, o meglio funziona ma solo al reload della pagina e solo con Fx, altri browser NO!
Eviderntemente Fx al reload si trova nella cache le dimensioni dell'immagini e le utilizza.

E' evidente che la funzione di finecaricimg viene lanciata subito dopo
Codice:
document.getElementById('bigimgid').src = urlimg;
senza attendere il caricamento dell'immagine.
Infatti, sia con Fx che con Ie, con questo codice
Codice:
	document.getElementById('bigimgid').src = urlimg;   alert("AAAAA");   //  carico l'immagine
	document.getElementById('bigimgid').onload = finecaricimg();   //  a fine caricamento richiamo la funzione specifica
ed attendo alcuni secondi a cliccare su OK nella finestra dell'alert il caricamento è corretto, evidentemente quei secondi sono utilizzati dal browser per il caricamento dell'immagine per cui poi trova le dimensioni.

Che fare, per farlo funzionare devo mantenere "onload" nel tag <img>, ma con doctype HTML5 o XHTML????

ciao