javascript crossbrowser new Image()

Question

Cosa c'è di sbagliato in questa funzione? Funziona in Opera e Firefox, ma doens't lavoro su Safari in Windows

function getImage(url) {   
    var image = document.createElement('img'); // new Image(1, 1); 
    image.src = url; 
    image.onload = function() {}; 
} 

quando provo getImage ('http://site.com/someservlet.gif') Questa immagine non viene caricato (perché someservlet.gif log tutte le richieste) E ' funziona in Opera e Firefox, ma non in Safari. Ho provato "nuova immagine()" e "document.createElement ('img')" - lo stesso risultato.

UPDATE ==========: Funzione funziona bene quando si chiama direttamente, problema inizia quando viene chiamato da listener di eventi

<a href="http://google.com/" 
onclick="getImage('http://127.0.0.1/pic/img.gif?rnd=' + Math.random());">google</a> 

<a href="#" 
onclick="getImage('http://127.0.0.1/pic/img.gif?rnd=' + Math.random());">local</a> 

<script type="text/javascript"> 
function getImage(url) { 
    var image = document.createElement('img'); 
    alert('1'); 
    image.onload = function() {alert(image.src);}; 
    image.src = url; 
    alert('2'); 
} 
</script> 

"locale" collegamento funziona bene in Firefox, Opera e Safari (ma Safari mostra alert1, alert2 e quindi alert con "src" per qualche motivo, mentre altri browser mostrano alert1, alertSrc, alert2)

link "google" Opera, Firefox - funziona bene (alert1, alertSrc, alert2), ma Safari non - mostra alertSrc. In Safari vedi alert1, alert2 e tutto qui. Servlet "/pic/img.gif" non riceve richiesta quando qualcuno fa clic sul link "google" da Safari.

Qual è il problema, come risolverlo?

Grazie.

Answer 1

La mia prima impressione è che si inciampato su un codice di ottimizzazione nei browser che differisce caricamento delle immagini che non vengono visualizzati. Finora:

Safari 4.0.2 (530.19.1):

• funziona per me, come descritto (sia locali, google, e quando ho cambiato l'evento al passaggio del mouse)
• ordinamento del avvisi è alert1, alertsrc, alert2

Firefox Nightly (3.5.3pre, 20.090.805):

• funziona come descritto. Divertente, dal momento che non ha funzionato all'inizio. Prova a caricare l'immagine nella cache, controlla se influisce sul test.
• ordinamento delle segnalazioni è alert1, e poi alertsrc e alert2 allo stesso tempo (spostare la finestra di dialogo per vedere sia)

Google Chrome (2.0.172.39):

• opere come in Safari, anche se mouseover sembra sparare troppi eventi
• ordinamento delle segnalazioni è alert1, alert2, alertsrc

Internet Explorer (7.0.6001.18000)

• opere come descritto (sia locali, google, e quando cambiato in mouseover)
• ordinamento delle segnalazioni è alert1, alertsrc, alert2

Ricordare che ho cambiato la posizione dell'immagine in http://www.google.com.ar/images/nav_logo6.png poiché non ho uno script di immagine casuale in esecuzione al momento. In base a ciò, suggerirei di eseguire un test autonomamente con immagini diverse e provare immagini inesistenti, immagini nella cache, immagini non presenti nella cache.

Il motivo per cui gli avvisi non sono necessariamente in ordine è che i diversi browser caricano le immagini in ordini diversi, e l'alertrc si verifica solo dopo che l'immagine è stata caricata. Un buon controllo se un'immagine è caricata o meno è se la larghezza è 0.

Answer 2

prova questo esempio in IE e Safary e funziona perfettamente.

function getImage(url) {   
    var image = document.createElement('img'); // new Image(1, 1); 
    image.src = url; 
    image.onload = function() {alert('ok');}; 
} 
getImage("http://www.google.com.ar/images/nav_logo6.png"); 

Answer 3

L'unico modo che non riuscito a farlo funzionare in IE è stato quello di utilizzare nuova immagine() piuttosto che document.createElement. Quello era risolvibile spostando image.src a dopo la funzione onload:

image.onload = function() {} 
image.src = url; 

Answer 4

Penso che sia un problema di cache.
Quando dici che il file image.src = url; javascript va immediatamente a recuperare l'immagine, e se l'immagine viene memorizzata nella cache, il browser userà solo quello memorizzato nella cache e spara l'onload, e ora dici image.onload = function() {}; ma il carico è già stato attivato, quindi function() non è mai chiamato.

In ogni caso, questo è tutto solo la mia speculazione, non sono sicuro se ho ragione. Tuttavia, se ho ragione, dovresti essere in grado di risolverlo spostando image.src = url; in image.onload = function() {};