Change the <img /> image using a JavaScript Image object

Question

I have a JavaScript Image Object that I dynamically load using jQuery.

What I want to do is change the image <img /> with the Image stored on my object. How can I do it?

Note. I want to avoid changing the source of the <img /> , since it downloads it again from the server, and I already have the image stored in the image object

Answer 1

You mean

 $('#imageToChange').replaceWith(imageObject) 

?

Answer 2

New Image Object:

 var Image_off = new Image(); Image_off.src = 'first.jpg'; 

Change src image with jQuery:

 $("#my_image").attr("src",Image_off.src); 

Answer 3

With jQuery ... have both images already on your page and show or hide one based on logical state.

Answer 4

Make your new image in javascript memory, and then add it after the original image, then delete the original. You can also cache the original before deleting it if you want to reuse it.

HTML

 <img id="replace" /> 

Js

 var img = new Image(); img.src = "someUri.png"; $("#replace").after(img); $("#replace").remove();