ImageLoader Object

Summary

Loads an HTML, SVG, or other XML element from a URL.

Syntax
TypeScript
JavaScript
function lt.ImageLoader 
	implements IDisposable 
class lt.ImageLoader() 
	implements IDisposable 

Remarks

ImageLoader is used across LEADTOOLS to load images in a variety of ways while abstracting out long setup code and covering differences between older and newer browsers. The typical use case for an ImageLoader would be to load a web-safe image file, such as a PNG, with support for callbacks on success and failure.

UrlMode allows for multiple ways of loading an image to best suit your needs. For more information on the differences between each type of image loading, see ImageLoaderUrlMode.

ImageLoader supports images in the typical fashion via image.src or AJAX for both web-safe image files and SVG images.

For more information on the loading process, see Run.

Example

Save this HTML file as "index.html" in any directory. Inside that directory, create a folder with the name "Scripts". Copy the required Leadtools.js file in the example from "[LEADTOOLS Installation Folder]\Bin\JS" to "Scripts". Finally, open the HTML file in any browser that supports HTML5. This demo will require you to paste in some URLs for images to load.

TypeScript
JavaScript
<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
   <title>ImageLoader Example</title> 
   <meta charset="utf-8" /> 
 
   <!-- The LEADTOOLS Javascript Libraries --> 
   <script src="Scripts/Leadtools.js"></script> 
 
   <!-- Our image loading code --> 
   <script type="text/javascript"> 
      "use strict"; 
 
      // Before the imageLoader is run, we can do what we like. 
      function preRun(imageLoader, preRunEventArgs) { 
         // Optional: we can set "abort" to true to make the imageLoader fail. 
         //preRunEventArgs.cancel = true; 
         console.log("ImageLoader about to run: " + imageLoader.url); 
      } 
 
      // When we're done, append the image to our page. 
      function done(imageLoader) { 
         // For this example, we set an extra property as a target ID. 
         var parent = document.getElementById(imageLoader["parent"]); 
         var textElement = document.createElement("p"); 
         textElement.innerHTML = (imageLoader.isHTMLImageElement ? "<img>" : "<svg>") + " width: " + imageLoader.width + ", height: " + imageLoader.height; 
         parent.appendChild(imageLoader.element); 
         parent.appendChild(textElement); 
      } 
 
      // If we failed, show the error. 
      function fail(imageLoader) { 
         var parent = document.getElementById(imageLoader["parent"]); 
         var textElement = document.createElement("p"); 
         textElement.innerHTML = imageLoader.error; 
         parent.appendChild(textElement); 
         console.error(imageLoader.error); 
      } 
 
      // Do some cleanup, regardless of the result 
      function always(imageLoader) { 
         imageLoader.preRun.remove(preRun); 
         imageLoader.done.remove(done); 
         imageLoader.fail.remove(fail); 
         imageLoader.always.remove(always); 
         // Call dispose at the very end 
         imageLoader.dispose(); 
      } 
 
      document.addEventListener("DOMContentLoaded", function (event) { 
         var imagesHolder = document.getElementById("imagesHolder"); 
 
         // We will show the results of loading a raster web image and SVG in all three supported loading modes. 
         // Insert URLs to raster (GIF, PNG, JPG) and SVG images below. The images must have CORS properties for AJAX. 
         var imageRasterUrl = "http://demo.leadtools.com/images/gif/clock.gif"; 
         var imageSvgUrl = "http://demo.leadtools.com/images/svg/lazio.svg"; 
 
         var targets = [ 
            // Raster images 
            { parent: "rasterImageUrl", mode: lt.ImageLoaderUrlMode.imageUrl, url: imageRasterUrl }, 
            { parent: "rasterAjaxDataUrl", mode: lt.ImageLoaderUrlMode.ajaxDataUrl, url: imageRasterUrl }, 
            { parent: "rasterAjaxXml", mode: lt.ImageLoaderUrlMode.ajaxXml, url: imageRasterUrl }, 
            // SVG images 
            { parent: "svgImageUrl", mode: lt.ImageLoaderUrlMode.imageUrl, url: imageSvgUrl }, 
            { parent: "svgAjaxDataUrl", mode: lt.ImageLoaderUrlMode.ajaxDataUrl, url: imageSvgUrl }, 
            { parent: "svgAjaxXml", mode: lt.ImageLoaderUrlMode.ajaxXml, url: imageSvgUrl }, 
         ]; 
 
         targets.forEach(function (target) { 
            var imageLoader = new lt.ImageLoader(); 
            imageLoader.urlMode = target.mode; 
            imageLoader.url = target.url; 
 
            // If we're loading with AJAX, attach a header or even change to a POST request (endpoint must have proper CORS properties) 
            //if (target.mode === lt.ImageLoaderUrlMode.ajaxDataUrl || target.mode === lt.ImageLoaderUrlMode.ajaxXml) { 
            //imageLoader.ajaxOptions.headers["myKey"] = "myValue"; 
            //imageLoader.ajaxOptions.method = "POST"; 
            //imageLoader.ajaxOptions.headers["contentType"] = "application/json"; 
            //imageLoader.ajaxOptions.postData = JSON.stringify({ key: "value" }); 
            //} 
            imageLoader.preRun.add(preRun); 
            imageLoader.done.add(done); 
            imageLoader.fail.add(fail); 
            imageLoader.always.add(always); 
 
            // Add the target ID to the loader so we can use it in our callbacks easily 
            imageLoader["parent"] = target.parent; 
            imageLoader.run(); 
         }); 
      }); 
   </script> 
</head> 
 
<body style="margin: 5px; font-family: Arial, Helvetica, sans-serif;"> 
   <!-- The element used by the imageLoader to do extra loading (hidden) --> 
   <div id="imagesHolder" style="visibility: hidden;"></div> 
 
   <h4>Open your browser's developer tools to see how these images differ in the DOM.</h4> 
   <h4>You will need CORS-enabled images for AJAX.</h4> 
   <!-- Where we want to put our result --> 
   <table style="text-align: center;"> 
      <thead> 
         <tr> 
            <th></th> 
            <th style="width: 250px;">Raster</th> 
            <th style="width: 250px;">SVG</th> 
         </tr> 
      </thead> 
      <tbody> 
         <tr> 
            <th>Image Url</th> 
            <td id="rasterImageUrl"></td> 
            <td id="svgImageUrl"></td> 
         </tr> 
         <tr> 
            <th>Ajax Data Url</th> 
            <td id="rasterAjaxDataUrl"></td> 
            <td id="svgAjaxDataUrl"></td> 
         </tr> 
         <tr> 
            <th>Ajax Xml</th> 
            <td id="rasterAjaxXml"></td> 
            <td id="svgAjaxXml"></td> 
         </tr> 
      </tbody> 
   </table> 
 
 
</body> 
 
</html> 
/// ImageLoader.htm 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="utf-8" /> 
  <title>ImageLoader Example</title> 
 
  <!-- The LEADTOOLS Javascript Libraries --> 
  <script src="libs/Leadtools.js"></script> 
 
  <!-- Our image loading code --> 
  <script src="ImageLoader.js"></script> 
 
  <style> 
    body { 
      font-family: 'Arial', 'Helvetica', sans-serif; 
      margin: 5px 5px 5px 5px; 
    } 
 
    #imagesHolder { 
      visibility: hidden; 
    } 
 
    table { 
      text-align: center; 
    } 
 
    th { 
      width: 250px; 
    } 
  </style> 
</head> 
 
<body> 
   <!-- The element used by the imageLoader to do extra loading (hidden) --> 
   <div id="imagesHolder"></div> 
 
   <h4>Open your browser's developer tools to see how these images differ in the DOM.</h4> 
   <h4>You will need CORS-enabled images for AJAX.</h4> 
   <!-- Where we want to put our result --> 
   <table> 
      <thead> 
         <tr> 
            <th></th> 
            <th>Raster</th> 
            <th>SVG</th> 
         </tr> 
      </thead> 
      <tbody> 
         <tr> 
            <th>Image Url</th> 
            <td id="rasterImageUrl"></td> 
            <td id="svgImageUrl"></td> 
         </tr> 
         <tr> 
            <th>Ajax Data Url</th> 
            <td id="rasterAjaxDataUrl"></td> 
            <td id="svgAjaxDataUrl"></td> 
         </tr> 
         <tr> 
            <th>Ajax Xml</th> 
            <td id="rasterAjaxXml"></td> 
            <td id="svgAjaxXml"></td> 
         </tr> 
      </tbody> 
   </table> 
</body> 
</html> 
/// ImageLoader.ts 
class App_ImageLoader { 
   constructor() { 
      // Set the LEADTOOLS license. Replace this with your actual license file 
      lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/v200/LEADTOOLSEVAL.txt", "EVAL", null); 
   } 
 
   // Before the imageLoader is run, we can do what we like. 
   public preRun(imageLoader, preRunEventArgs): void { 
      // Optional: we can set "abort" to true to make the imageLoader fail. 
      //preRunEventArgs.cancel = true; 
      console.log("ImageLoader about to run: " + imageLoader.url); 
   } 
 
   // When we're done, append the image to our page. 
   public done(imageLoader): void { 
      // For this example, we set an extra property as a target ID. 
      const parent = document.getElementById(imageLoader["parent"]); 
      const textElement = document.createElement("p"); 
      textElement.innerHTML = (imageLoader.isHTMLImageElement ? "<img>" : "<svg>") + " width: " + imageLoader.width + ", height: " + imageLoader.height; 
      parent.appendChild(imageLoader.element); 
      parent.appendChild(textElement); 
   } 
 
   // If we failed, show the error. 
   public fail(imageLoader): void { 
      const parent = document.getElementById(imageLoader["parent"]); 
      const textElement = document.createElement("p"); 
      textElement.innerHTML = imageLoader.error; 
      parent.appendChild(textElement); 
      console.error(imageLoader.error); 
   } 
 
   // Do some cleanup, regardless of the result 
   public always(imageLoader): void { 
      imageLoader.preRun.remove(this.preRun); 
      imageLoader.done.remove(this.done); 
      imageLoader.fail.remove(this.fail); 
      imageLoader.always.remove(this.always); 
      // Call dispose at the very end 
      imageLoader.dispose(); 
   } 
} 
 
document.addEventListener("DOMContentLoaded", (event) => { 
   let myApp: App_ImageLoader = new App_ImageLoader(); 
 
   const imagesHolder = document.getElementById("imagesHolder"); 
 
   // We will show the results of loading a raster web image and SVG in all three supported loading modes. 
   // Insert URLs to raster (GIF, PNG, JPG) and SVG images below. The images must have CORS properties for AJAX. 
   const imageRasterUrl: string = "http://demo.leadtools.com/images/gif/clock.gif"; 
   const imageSvgUrl: string = "http://demo.leadtools.com/images/svg/lazio.svg"; 
 
   const targets = [ 
      // Raster images 
      { parent: "rasterImageUrl", mode: lt.ImageLoaderUrlMode.imageUrl, url: imageRasterUrl }, 
      { parent: "rasterAjaxDataUrl", mode: lt.ImageLoaderUrlMode.ajaxDataUrl, url: imageRasterUrl }, 
      { parent: "rasterAjaxXml", mode: lt.ImageLoaderUrlMode.ajaxXml, url: imageRasterUrl }, 
      // SVG images 
      { parent: "svgImageUrl", mode: lt.ImageLoaderUrlMode.imageUrl, url: imageSvgUrl }, 
      { parent: "svgAjaxDataUrl", mode: lt.ImageLoaderUrlMode.ajaxDataUrl, url: imageSvgUrl }, 
      { parent: "svgAjaxXml", mode: lt.ImageLoaderUrlMode.ajaxXml, url: imageSvgUrl }, 
   ]; 
 
   targets.forEach(function (target) { 
      const imageLoader: lt.ImageLoader = new lt.ImageLoader(); 
      imageLoader.urlMode = target.mode; 
      imageLoader.url = target.url; 
 
      // If we're loading with AJAX, attach a header or even change to a POST request (endpoint must have proper CORS properties) 
      //if (target.mode === lt.ImageLoaderUrlMode.ajaxDataUrl || target.mode === lt.ImageLoaderUrlMode.ajaxXml) { 
      //imageLoader.ajaxOptions.headers["myKey"] = "myValue"; 
      //imageLoader.ajaxOptions.method = "POST"; 
      //imageLoader.ajaxOptions.headers["contentType"] = "application/json"; 
      //imageLoader.ajaxOptions.postData = JSON.stringify({ key: "value" }); 
      //} 
      imageLoader.preRun.add(myApp.preRun); 
      imageLoader.done.add(myApp.done); 
      imageLoader.fail.add(myApp.fail); 
      imageLoader.always.add(myApp.always); 
 
      // Add the target ID to the loader so we can use it in our callbacks easily 
      imageLoader["parent"] = target.parent; 
      imageLoader.run(); 
   }); 
}); 

Requirements

Target Platforms

Help Version 20.0.2019.3.11
Products | Support | Contact Us | Intellectual Property Notices
© 1991-2019 LEAD Technologies, Inc. All Rights Reserved.

Leadtools Assembly