when the image load event with vanilla javascript

Question

i want to make one of the images disappear (opacity 0 ) but when the images completely load here is the code :

var imges = document.getElementsByTagName('img');


imges[0].style.opacity=0;

how to write the event of when the images load completely then do this ?

of course with vanilla javascript

Answer 1

You can dynamically append to it the dom to ensure the event listener is on there before it is parsed by the browser like below.

var img = new Image();
img.onload = function () {
   this.style.opacity = 0;
}
img.src = "The url or path to your image.";