var myImage = new Image(width, height)
Parameters to the constructor function are the pixel width and height of the image. These dimensions should match the <img/> tag’s width and height attributes. Once the image object exists in memory, we can then assign a file name or URL to the src property of that image object:
myImage.src = "img1.jpg"
When the browser encounters a statement assigning a URL to an image object’s src property, the browser loads that image into the image cache. All users see is some extra loading information in the status bar, as if another image were in the page. By the time the entire page loads, all images generated in this way are tucked away in the image cache. We can then assign our cached image’s src property or the actual image URL to the src property of the document image created with the <img/> tag:
document.images.src = myImage.src
The change to the image in the document is instantaneous.
Look at the below example
That’s all. Thank you for your reading.