In attesa dell'immagine da caricare in Javascript

Sto effettuando una chiamata Ajax che mi restituisce alcune informazioni incluso un percorso immagine. Preparo tutte queste informazioni nel mio codice HTML che verrà visualizzato come una sorta di popup. Ho appena attivato la visibilità di popup div da nascosta a visibile.In attesa dell'immagine da caricare in Javascript

Per impostare la posizione del mio div popup, devo calcolare a seconda dell'altezza dell'immagine. Quindi, devo aspettare che l'immagine venga caricata per conoscerne la dimensione prima di impostare la posizione e passare la visibilità a visibile.

Ho provato trucchi con ricorsione, setTimeout, completa la proprietà img, mentre il ciclo ... senza successo.

Quindi, come posso fare questo. Forse dovrei restituire le dimensioni nella mia chiamata Ajax.

fonte

2010-02-26 Jeenyus

perché non funziona con la proprietà 'Image.complete'? –

var img = new Image(); 
img.onload = function() { alert("Height: " + this.height); } 
img.src = "http://path/to/image.jpg";

Si noti che è importante farlo nel modo di cui sopra: primo allegare il gestore, quindi impostare il src. Se lo fai al contrario e l'immagine è nella cache, potresti perdere l'evento. JavaScript viene eseguito su un singolo thread nei browser (a meno che tu non stia utilizzando i web worker), ma i browser non sono a thread singolo. È perfettamente valido per il browser vedere lo src, identificare la risorsa disponibile, caricarla, attivare l'evento, controllare l'elemento per vedere se ha gestori che devono essere accodati per la richiamata, non vedere nessuno e completare la elaborazione degli eventi, il tutto tra la riga src e la linea che collega il gestore. (I callback non si verificherebbero tra le righe se fossero registrati, attenderanno in coda, ma se non ce ne sono, l'evento non è necessario attendere.)

fonte

2010-02-26 14:18:42

+1 - Questo è quello che avrei postato. –

Grat! BTW: sono abbastanza ignorante sull'argomento AJAX, ma nel caso in cui un'immagine ottenuta con AJAX sia memorizzata nella cache allo stesso modo di un'immagine scritta in modo significativo nel codice HTML, è possibile aggiungerla per evitare il caching dell'immagine del browser (ovviamente solo se ne hai bisogno): img.src = "http: //path/to/image.jpg" + "? refresh =" + new Date(). getTime(); –

@Marco O imposta 'cache: false' su XHR :) Anche se non penso sia rilevante qui perché la chiamata AJAX sta restituendo un URL all'immagine, non l'immagine stessa. Ma sì, suppongo che potrebbe ancora usare un valore di stringa di query casuale per assicurarsi che non si verifichi la memorizzazione nella cache degli user-agent. –

Se si utilizza jQuery, è possibile utilizzare l'evento load.

Dai un'occhiata alla all'esempio:

$('img.userIcon').load(function(){ 
    if($(this).height() > 100) { 
     $(this).addClass('bigImg'); 
    } 
});

fonte

2010-02-26 14:16:51 Sagi

-1: nessuna menzione di jQuery nella domanda, quindi una risposta come questa può essere abbastanza confusa. –

+46

Si prega di non utilizzare jquery a meno che non sia richiesto jquery –

Si prega di notare anche i seguenti avvertimenti con il metodo di caricamento quando utilizzato con le immagini (tratto da http: //api.jquery.it/load-event /): > Non funziona in modo coerente né affidabile cross-browser > Non si attiva correttamente in WebKit se l'immagine src è impostata sullo stesso src di prima > Non funziona bolla correttamente l'albero DOM > Può cessare di sparare per le immagini che già vivono nella cache del browser –

Ho avuto un captcha lento (1st_image) caricamento dell'immagine sulla mia pagina e volevo visualizzare un'altra immagine (2nd_image) solo DOPO l'immagine captcha (1st_image) caricata. Quindi ho dovuto aspettare l'immagine captcha (1st_image) per caricare prima.

Ecco la soluzione che funziona perfettamente per aspettare che un'immagine venga caricata prima e quindi caricare un'altra immagine: (Non dimenticare di visualizzare un'immagine "please wait!" Mentre sono in attesa del caricamento di un'altra immagine)

<script> 
function checkImageLoad() { 
    if (document.getElementById("1st_image").complete == true){console.log("1st_image Loaded!");} 
    document.getElementById("2nd_image").src = "http://domain.com/2nd_image.png"; 
} 
</script> 
<body onload="checkImageLoad();"> 
<img id="1st_image" src="http://domain.com/1st_image.png"> 
<img id="2nd_image" src="http://domain.com/loading_please_wait.gif">

o la velocità di internet è lenta o veloce, browser attendere per l'intera pagina da caricare con tutte le immagini (anche se sono collegati esternamente) e poi eseguire la funzione, in modo che il 2 ° immagine viene visualizzata solo dopo la prima immagine va bene.

Avanzata Nota: è possibile utilizzare l'URL di una pagina Web nella "src" dell'immagine per caricare prima una pagina Web e quindi visualizzare l'immagine. Lo scopo è caricare il cookie dalla pagina Web esterna che potrebbe influire sulla 2a immagine visualizzata (come captcha)

fonte

2016-05-01 12:15:13 Tarik

In attesa dell'immagine da caricare in Javascript

risposta

Problemi correlati