sostituire "onload" nel tag <img> con Js

[acweb-2004]

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:

<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:

<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:

<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]

Ciao, prova a richiamare la funzione al caricamento della pagina

window.onload = function(){finecaricimg();};

 

[acweb-2004]

Ciao, prova a richiamare la funzione al caricamento della pagina

window.onload = function(){finecaricimg();};

NO, così non la carica neanche sbagliata, cioè con top e left nn impostati

ciao

augusto

 

[criric]

Non so cosa fa finecaricimg(), ma, ho provato cosi e funziona.

<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]

Non so cosa fa finecaricimg(), ma, ho provato cosi e funziona.

ciao

nn so se sbaglio io ad inserire i tuoi suggerimenti, ma a me non funziona.
Ho messo in rete le due versioni:
img con onload (nn funge co Ie perchè doctype xhtml, ma con Fx funge)
http://www.scfalegnameria.it/sito_v3/sine-fine/cassetto1.htm

con Js:
http://www.scfalegnameria.it/sito_v3/sine-fine/cassetto.htm

c'è una bella differenza!

grazie

ciao

 

[criric]

Il problema è in questa sintassi

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

document.getElementById("bigimgid").width

 

[acweb-2004]

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!

 

[criric]

hai dimenticato di cambiare anche questo

document.bigimgid.src = urlimg;

 

[acweb-2004]

me ne sono accorto dopo il post, ma non cambia....

e comunque nn capisco perchè con onload nel tag img anche con src sbagliata funge....????

 

[criric]

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()

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]

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]

Secondo me sbagli :
width è = 0 perchè nell'attributo src dell'immagine non c'è nessun percorso

 

[acweb-2004]

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]

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]

Non avevo fatto caso al tag body
puoi provare cosi: togli tutte le funzioni dal tag body e le metti in ordine nella head

<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]

NO, nn va
penso che si potrebbe provare cosi:

    //  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]

così sembra funzionare, e pare anche corretto come 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]

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

document.getElementById('bigimgid').src = urlimg;

senza attendere il caricamento dell'immagine.
Infatti, sia con Fx che con Ie, con questo 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