Rapid Image Loading

This JavaScript Reference section displays the code for an example program that shows how to rapidly load a large image. The image only appears to load rapidly because, as the larger image loads, a smaller blurred version is displayed.

RapidImageLoading.html

<!DOCTYPE html>
<html>
<head>
  <title>XoaX.net's Javascript</title>
  <style media="screen">
    .cBlur {
      filter: blur(10px);
      transition: filter 2s ease-in-out;
    }
    .cNoBlur {
      transition: filter 2s ease-in-out;
    }
  </style>
  <script type="text/javascript">
    var qImage = null;
    var qLargeImage = null;


    function Initialization() {
      qImage = document.getElementById("idImage");
      qLargeImage = qLargeImage = document.createElement("img");
      // This would be called to set the image once it is loaded.
      qLargeImage.onload = function() {
        // An artificial delay to similate large image loading.
        setTimeout(SetImage, 2000);
      }
      // Set the large image to the source to begin loading.
      qLargeImage.src = "Large.png";
    }

	// This would be done when the image is loaded as the onload function.
    function SetImage() {
      qImage.src = qLargeImage.src;
      qImage.className = "cNoBlur";
    }

    // This begins the execution
    window.onload = Initialization;
  </script>
</head>
<body>
  <img id="idImage" class="cBlur" src="Small.png" width="600"/>
</body>
</html>

Core JavaScript

Rapid Image Loading

RapidImageLoading.html

Output