ImageLoader Object

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

Object Model

Syntax

JavaScript

function Leadtools.ImageLoader()

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 the type of image being loaded ImageLoaderUrlMode for more information). In brief, ImageLoader can load images in the typical image.src fashion or via AJAX for both web-safe image files and SVG images.

For more information on the loading process, see Run.

Example

This example will show the various LTHelper's properties for the current browser.

Copy and paste this example into your favorite text editor and save it into a folder on your disk with any name, such as "index.html". Inside that folder, create a directory with the name "Scripts". Copy the required .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.

JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
   <title>ImageLoader Example</title>
   <meta charset="utf-8" />
</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>

   <!-- The LEADTOOLS Javascript Libraries -->
   <script src="Scripts/Leadtools.js"></script>

   <!-- Our image loading code -->
   <script type="text/javascript">
      "use strict";
      (function loadImages() {

         // 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 used the tag as a target ID.
            var parent = document.getElementById(imageLoader.tag.parent);
            var textElement = document.createElement("p");
            textElement.innerHTML = (imageLoader.isHTMLImageElement ? "&lt;img&gt;" : "&lt;svg&gt;") + " 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.tag.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 tags = [
               // 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 },
            ];

            tags.forEach(function (tag) {
               var imageLoader = new lt.ImageLoader();
               imageLoader.urlMode = tag.mode;
               imageLoader.url = tag.url;

               // If we're loading with AJAX, attach a header or even change to a POST request (endpoint must have proper CORS properties)
               //if (tag.mode === lt.ImageLoaderUrlMode.ajaxDataUrl || tag.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 this object as a tag so we can use it in our callbacks easily
               imageLoader.tag = tag;
               imageLoader.run();
            });
         });
      }());
   </script>
</body>
</html>

ImageLoader Object

Reference