Core JavaScript

Asynchronous Image Loading

This JavaScript example demonstrates how to load an image asynchronously.

AsynchronousImageLoading.html

<!DOCTYPE html>
<html>
<head>
    <title>XoaX.net's Javascript</title>
    <script type="text/javascript" src="AsynchronousImageLoading.js"></script>
    <style>
		#idAsynch {
  			width: 736px;
  			height: 1570px;
  			margin: 0px;
		}
    </style>
</head>
<body onload="Initialize()" style="margin: 0px;padding: 0px;">
    <img id="idAsynch"/>
</body>
</html>

AsynchronousImageLoading.js

function Initialize() {
  // Create an image object for asychronous loading
  var qImage = new Image();
  // This will be called once the image is loaded
  qImage.onload = function(){
    var qImageElement = document.getElementById("idAsynch");
    qImageElement.src = this.src;
  }
  qImage.src = "Kazimirowski_Eugeniusz_Divine_Mercy_1934.jpg";
}
 

Output

 
 

© 2007–2026 XoaX.net LLC. All rights reserved.