Preload an Image using JavaScript
In this example, we preload an image by coding in javascript.
- <html>
-
- <head>
- <script type="text/javascript">
- myimg = new Image();
- myimg.src = "two.gif";
-
- function ChangeTheImg() {
- document.getElementById('myfrstImage').src = myimg.src;
- }
- </script>
- </head>
-
- <body>
- <img id="myfrstImage" onmouseover="ChangeTheImg()" src="One.jpg" width="100" height="100">
- </body>
-
- </html>
In this program, we call the function ChangeTheImg() by which we set the source of the previous image.
- 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.