javascript crossbrowser new Image()

Question

¿Qué hay de malo con esta función? Funciona en Opera y Firefox, pero doens't trabajo sobre Safari bajo Windows

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

cuando intento getImage ('http://site.com/someservlet.gif') Esta imagen no se carga (porque someservlet.gif los registros de todas las solicitudes que ) funciona en Opera y Firefox, pero no en Safari. Intenté "nueva imagen()" y "document.createElement ('img')" - el mismo resultado.

ACTUALIZACIÓN ==========: Función funciona bien cuando se llama directamente, el problema se inicia cuando se llama a partir de detector de eventos

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

"local" enlace funciona bien en Firefox, Opera y Safari (pero Safari muestra alerta1, alerta2 y luego alerta con "src" por alguna razón, mientras que otros navegadores muestran alerta1, alertaSrc, alerta2)

"google" enlace Opera, Firefox: funciona bien (alerta1, alertaSrc, alerta2), pero Safari no - muestra alertSrc. En Safari, ves alert1, alert2 y eso es todo. El servlet "/pic/img.gif" no recibe la solicitud cuando alguien hace clic en el enlace "google" de Safari.

¿Cuál es el problema, cómo solucionarlo?

Gracias.

Answer 1

Mi primera impresión es que se tropezó con algo de código de optimización en los navegadores que difiere la carga de imágenes que no se muestran. Hasta ahora:

Safari 4.0.2 (530.19.1):

• funciona para mí, tal como se describe (tanto local, Google, y cuando he cambiado el evento al pasar el ratón)
• ordenamiento de la alertas es alert1, alertsrc, alert2

Firefox Nightly (3.5.3pre, 20090805):

• obras tal como se describe. Es gracioso, ya que al principio no funcionó. Intente cargar la imagen en su caché, vea si afecta la prueba.
• ordenamiento de las alertas es alert1, y luego alertsrc y alert2 al mismo tiempo (mover el diálogo para ver tanto)

Google Chrome (2.0.172.39):

• obras como en Safari, aunque parece pasar el ratón para disparar demasiados eventos
• ordenamiento de las alertas es alert1, alert2, alertsrc

Internet Explorer (7.0.6001.18000)

• obras como se describe (tanto locales, Google, y cuando cambió a mouseover)
• ordenamiento de las alertas es alert1, alertsrc, alert2

Tenga en cuenta que he cambiado la ubicación de la imagen a http://www.google.com.ar/images/nav_logo6.png ya que no tengo un script de imagen aleatoria ejecutándose en este momento. En base a esto, le sugiero que ejecute una prueba usted mismo con diferentes imágenes y pruebe imágenes que no existen, imágenes en su caché, imágenes que no están en su caché.

La razón por la que las alertas no están necesariamente en orden es que los diferentes navegadores cargan imágenes en diferentes órdenes, y la alerta solo ocurre después de cargar la imagen. Un buen control si una imagen está cargada o no es si el ancho es 0.

Answer 2

prueba este ejemplo en IE y Safary, y funciona perfectamente.

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

La única manera de que no podía conseguir que funcione en IE era utilizar nueva imagen() en lugar dedocument.createElement. Eso era corregible moviendo a image.src tras su función onload:

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

Answer 4

Creo que es un problema de caché.
Cuando dice image.src = url; javascript va inmediatamente a buscar la imagen, y si la imagen está almacenada en caché, el navegador simplemente usará la almacenada en caché y activará onload, y ahora dice image.onload = function() {}; pero ya se ha activado, por lo que function() nunca llamado.

De todos modos, esto es solo mi especulación, no estoy seguro si estoy en lo correcto. Sin embargo, si estoy en lo cierto, debería poder arreglarlo moviendo image.src = url; bajo image.onload = function() {};