Post
Ask Question

Preload an Image using JavaScript

Preload an Image using JavaScript

 
In this example, we preload an image by coding in javascript.
  1. <html>  
  2.   
  3.    <head>  
  4.       <script type="text/javascript">  
  5.       myimg = new Image();  
  6.       myimg.src = "two.gif";  
  7.   
  8.       function ChangeTheImg() {  
  9.          document.getElementById('myfrstImage').src = myimg.src;  
  10.       }  
  11.       </script>  
  12.    </head>  
  13.   
  14.    <body>  
  15.       <img id="myfrstImage" onmouseover="ChangeTheImg()" src="One.jpg" width="100" height="100">  
  16.    </body>  
  17.   
  18. </html> 
In this program, we call the function ChangeTheImg()  by which we set the source of the previous image.
  1. document.getElementById('myfrstImage').src=myimg.src; 
when we put the mouse over on the previous image the function is called. It takes no time as the second image is already loaded by the browser.
Next Recommended Reading Get And Set Variable Values From One JavaScript File To Another JavaScript File Using Local Storage