In This Topic ▼

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

ImageLoader.ts

ImageLoader.js

ImageLoader.html

export class ImageLoaderExample { 
   // 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. 
   private imageRasterUrl: string = "http://demo.leadtools.com/images/gif/clock.gif"; 
   private imageSvgUrl: string = "http://demo.leadtools.com/images/svg/lazio.svg"; 
 
   constructor() { 
      lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", null); 
   } 
 
   public run = () => { 
      const targets = [ 
         // Raster images 
         { parent: "rasterImageUrl", mode: lt.ImageLoaderUrlMode.imageUrl, url: this.imageRasterUrl }, 
         { parent: "rasterAjaxDataUrl", mode: lt.ImageLoaderUrlMode.ajaxDataUrl, url: this.imageRasterUrl }, 
         { parent: "rasterAjaxXml", mode: lt.ImageLoaderUrlMode.ajaxXml, url: this.imageRasterUrl }, 
         // SVG images 
         { parent: "svgImageUrl", mode: lt.ImageLoaderUrlMode.imageUrl, url: this.imageSvgUrl }, 
         { parent: "svgAjaxDataUrl", mode: lt.ImageLoaderUrlMode.ajaxDataUrl, url: this.imageSvgUrl }, 
         { parent: "svgAjaxXml", mode: lt.ImageLoaderUrlMode.ajaxXml, url: this.imageSvgUrl }, 
      ]; 
      targets.forEach((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(this.preRun); 
         imageLoader.done.add(this.done); 
         imageLoader.fail.add(this.fail); 
         imageLoader.always.add(this.always); 
 
         // Add the target ID to the loader so we can use it in our callbacks easily 
         imageLoader["parent"] = target.parent; 
         imageLoader.run(); 
      }); 
   } 
 
   // 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(); 
   } 
}

export class ImageLoaderExample { 
   // 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. 
   imageRasterUrl = "http://demo.leadtools.com/images/gif/clock.gif"; 
   imageSvgUrl = "http://demo.leadtools.com/images/svg/lazio.svg"; 
 
   constructor() { 
      lt.RasterSupport.setLicenseUri("https://demo.leadtools.com/licenses/js/LEADTOOLSEVAL.txt", "EVAL", null); 
   } 
 
   run = () => { 
      const targets = [ 
         // Raster images 
         { parent: "rasterImageUrl", mode: lt.ImageLoaderUrlMode.imageUrl, url: this.imageRasterUrl }, 
         { parent: "rasterAjaxDataUrl", mode: lt.ImageLoaderUrlMode.ajaxDataUrl, url: this.imageRasterUrl }, 
         { parent: "rasterAjaxXml", mode: lt.ImageLoaderUrlMode.ajaxXml, url: this.imageRasterUrl }, 
         // SVG images 
         { parent: "svgImageUrl", mode: lt.ImageLoaderUrlMode.imageUrl, url: this.imageSvgUrl }, 
         { parent: "svgAjaxDataUrl", mode: lt.ImageLoaderUrlMode.ajaxDataUrl, url: this.imageSvgUrl }, 
         { parent: "svgAjaxXml", mode: lt.ImageLoaderUrlMode.ajaxXml, url: this.imageSvgUrl }, 
      ]; 
      targets.forEach((target) => { 
         const 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(this.preRun); 
         imageLoader.done.add(this.done); 
         imageLoader.fail.add(this.fail); 
         imageLoader.always.add(this.always); 
 
         // Add the target ID to the loader so we can use it in our callbacks easily 
         imageLoader["parent"] = target.parent; 
         imageLoader.run(); 
      }); 
   } 
 
   // Before the imageLoader is run, we can do what we like. 
   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. 
   done(imageLoader) { 
      // 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. 
   fail(imageLoader) { 
      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 
   always(imageLoader) { 
      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(); 
   } 
}

<!doctype html> 
<html lang="en"> 
<title>LEADTOOLS Example | ImageLoader</title> 
 
<head> 
   <script src="https://code.jquery.com/jquery-2.2.4.min.js" 
      integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 
 
   <script src="../../LT/Leadtools.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> 
   <!-- All demo files are bundled and appended to the window --> 
   <script src="../../bundle.js" type="text/javascript"></script> 
</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> 
 
<script> 
   window.onload = () => new window.examples.ImageLoader().run(); 
</script> 
</html>

Requirements

Target Platforms

Reference

ImageLoader Members

Leadtools Namespace

Download our FREE evaluation

Help Version 23.0.2024.2.29

Leadtools Assembly

Introduction

Getting Started

Namespaces

Leadtools Namespace

Assemblies