jQuery cambiar <img> src con $ (selector) .prop lleva mucho tiempo

Question

Así que no hay ningún problema con la funcionalidad de este código en sí. Tengo algo como esto:

<div> 
    <div><img id="imageToChange" src="/path/image.png" /></div> 
    <div id="textToChange">Text</div> 
</div> 

Tengo otra parte de mi código, que cambia la imagen src/texto con jQuery.

function changeImage() { 
    $('#imageToChange').prop('src', '/path/image2.png'); 
    $('#textToChange').html('New Text'); 
} 

Como es de esperar, esto funciona exactamente como esperaba. Pero con 1 peculiaridad.

En todos los navegadores principales (cromo/FF/IE). La imagen tarda mucho tiempo en cambiar.

Así que, por ejemplo, cuando llamo a changeImage(), el texto cambiará instantáneamente, pero la imagen no cambiará hasta 1-2 segundos después. (No imágenes grandes por ningún tramo, aproximadamente ~ 6KB, y local)

No he encontrado a nadie más realmente quejándose de ello, pero lo que me pregunto es si hay alguna manera de acelerar el cambio de la imagen src? Tal vez una mejor manera de hacerlo?

Esto es jquery 1.8.0 también.

Gracias

Answer 1

he visto este comportamiento antes. El retraso se debe a que la imagen no se almacena en la memoria caché y al tiempo de carga posterior. Las únicas soluciones que conozco son:

1. Precargue sus imágenes con objetos JavaScript Image.
2. Maneje el load event en la imagen y actualice el texto después de cargar la imagen. Nota jQuery se enumeran algunos problemas a tener en cuenta:

Advertencias del evento de carga cuando se utiliza con imágenes

Un desafío común a los desarrolladores tratan de resolver mediante el .load() acceso directo es para ejecutar una función cuando una imagen (o colección de imágenes ) se ha cargado por completo.Hay varias advertencias conocidas con que deben tenerse en cuenta. Estos son:

• No funciona consistentemente ni fiable entre navegadores
• No se dispara correctamente en WebKit si el src de imagen se ajusta a la misma como antes src
• no lo hace correctamente la burbuja hasta el árbol DOM
• puede dejar de disparar para imágenes que ya se viven en la caché del navegador

http://api.jquery.com/load-event/

Answer 2

es probable que el tiempo de carga de sus imágenes. si este es el caso, cargar la imagen la primera vez debe ser la única lenta. una carga de seguimiento, después de cambiar la imagen a otra cosa, sería rápido.

$('#imageToChange').prop('src', '/path/image1.png'); 
//slow, need to fetch image 
$('#imageToChange').prop('src', '/path/image2.png'); 
//slow, need to fetch image 
$('#imageToChange').prop('src', '/path/image1.png'); 
//fast, it already has this image 

Como solución, puede intentar precargar sus imágenes. O, mejor aún, use css sprites.

Answer 3

cuando cambie el src de la imagen obtendrá otro archivo de imagen. realiza una solicitud HTTP para la nueva imagen, por lo que debe cargarse antes de mostrarla. podría ser esto?

por cierto, por esta razón puede precargar la imagen con js. o bien añadir

<img src="path/to/image.jpg" style="display: none" /> 

a su html o el uso de JS

var im = new Image(1,1); 
im.src = "path/to/image.jpg"; 

esta manera la imagen se almacena en caché

Answer 4

Es la demora de la red. Pruebe esto:

<div> 
    <div><img id="imageToChange" src="/path/image.png" /></div> 
    <div id="textToChange">Text</div> 
</div> 
<img src='/path/image2.png' style='display:none'> 

Answer 5

Puede precargar la imagen con el objeto Imagen de Javascript.

En la cabecera de su documento de poner

<script type="text/javascript"> 
    img2 = new Image(); 
    img2.src = "/path/image2.png"; 
</script> 

Answer 6

Es posible que desee para tratar de alterar el atributo utilizando la función jQuery .attr. Si recuerdo correctamente, la etiqueta src de una imagen es un atributo, no una propiedad. Aunque tanto .prop como .attr realizan relativamente la misma función, para garantizar un comportamiento coherente entre los navegadores, puede utilizar la etiqueta .attr.

$('#imageToChange').attr('src', '/path/image2.png'); 

En lo que respecta al retraso, esto podría deberse al tamaño de la imagen. El navegador debe hacer una solicitud GET al servidor para la imagen y luego pintar el DOM con ella. Si la imagen es grande, podría causar un lapso de tiempo entre cuando el código cambia la fuente y cuando la nueva imagen se escribe correctamente en el DOM. Si la imagen es grande, le recomendamos que la reduzca o la optimice para usarla en la web.

Espero que esto ayude.