I have a JavaScript Image object that I load dynamically with jQuery.
What I want to do is change a <img /> image with one stored on my Image object. How should I do this?
Note: I want to avoid changing the source of my <img /> tag as it downloads it again from the server, and I already have the image stored in my image object
You mean
$('#imageToChange').replaceWith(imageObject)
?
document.querySelector("img").src=imageObject.src?myImage = new image ()) into a document html like` document.querySelector("img")=myImage`.New Image object:
var Image_off = new Image();
Image_off.src = 'first.jpg';
image src change with jQuery:
$("#my_image").attr("src",Image_off.src);
With jQuery... have both images already on your page and show or hide either one, based on a logical condition.
Make your new image in javascript memory, and then append it after the original image, then remove the original. You may also wish to cache the original before removing it in case you would like to re-use it.
html
<img id="replace" />
js
var img = new Image();
img.src = "someUri.png";
$("#replace").after(img);
$("#replace").remove();
$("#replace").prop('src', 'someUri.png')?
$('#replace').replaceWith(img);, just saying.
src is why I went that route.
$(image)? Images are usually cached, so loading the same image twice won't download it twice.$(image)does, but I have the image stored in a JavaScriptImageobject, and I want to avoid changing the src as I don't want to download the image every time I change it