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
 
Discussioni simili
Autore Titolo Forum Risposte Data
C Sostituire il comando body onload Javascript 30
D Sostituire img con altre img Photoshop 1
P [MS Access] Sostituire un carattere in tutta la tabella MS Access 11
Shyson [MySQL] Sostituire testo in in articolo MySQL 0
elpirata [MySQL] Sostituire valori campi con dati casuali MySQL 4
P [Photoshop] Sostituire i colori in modo preciso Photoshop 0
C [PHP] SOSTITUIRE VALORI DENTRO STRINGA PHP 0
elpirata [PHP] Sostituire if ed elseif con operatore ternario switch PHP 9
L [PHP] Sostituire link da stringa PHP 3
ecosito [WORDPRESS] Sostituire la cartella d'installazione? WordPress 2
S [Javascript] Sostituire elemento HTML preso randomicamente dentro array Javascript 1
M Sostituire le funzioni mysql con mysqli, ma quali? PHP 4
S Sostituire link con button. PHP 1
M sostituire parte di URL con espressioni regolari PHP PHP 8
Marco_88 Come sostituire valori in un campo per più oggetti. MySQL 2
JackIlPazzo Sostituire una riga specifica in un file di testo senza cancellare il rimanente PHP 13
max_400 Sostituire un div con un altro il comando innerHTML è bloccato Javascript 0
C Sostituire virgola con punto form PHP 2
P sostituire form con jquery jQuery 0
F sostituire un'immagine con jquery jQuery 2
felino Temperatura processore: soglia massima per sostituire pasta termica Hardware 2
Trapano sostituire iframe PHP 5
C Sostituire molte righe di codice PHP 2
L sostituire un carattere in una stringa acquisita da input jQuery 1
S sostituire codice html in molti file HTML e CSS 1
N [RISOLTO] Sostituire Input con a href PHP 10
Shyson Sostituire onclick Javascript 2
P Sostituire immagine in una cartella. PHP 6
M sostituire bottone con onchange submit Javascript 7
S Sostituire immagini in sequenza Javascript 4
C In una textarea sostituire il carattere \n in <br/> Javascript 14
Erzsébeth Sostituire richiamo immagini PHP 4
IImanuII Php sostituire un iframe PHP 4
zighy Sostituire dati database PHP 7
M sostituire un valore con un altro corrispondente PHP 11
A Sostituire una sottostringa a una stringa data PHP 11
L Sostituire file_get_contents ? PHP 10
N leggere/sostituire/restituire file txt PHP 1
Z Onclick : sostituire odiosi "button" con semplici Links Javascript 13
U Sostituire le funzionalità di un pulsante con un testo HTML e CSS 0
S E' possibile sostituire un dominio con un altro? Domini 4
webbetto Sostituire un campo vuoto Database 4
napuleone [Javascript] simulare click del mouse al 'onload' Javascript 1
K windows.onload() su ipad Javascript 0
A Caricamento dei Javascript nel window.onload Javascript 3
R [Risolto] Body onLoad e Immagini Rollover Classic ASP 6
blips Controllo valore con onload Javascript 1
F onload ricaricare solo le immagini Javascript 1
N Funzioni windows.onload in conflitto o prevaricanti (credo) Javascript 13
S Validazione xhtml (onload - embed) HTML e CSS 0

Discussioni simili