TypeScript
JavaScript
References ▼
Runs the ImageLoader.
ImageLoader.prototype.run = function() The run method begins the process of loading the image from the url. The ImageLoader will first call the preRun event callbacks, and if ImageLoaderPreRunEventArgs.cancel is set to true, then the fail and always callbacks will be called. After this, isWorking will be true.
How the image is loaded will be determined by the value of urlMode (see ImageLoaderUrlMode for a comparison of the different methods.)
If workingImageElement is null and an HTMLImageElement is needed (that is, urlMode is ImageLoaderUrlMode.imageUrl), one is created. Event handlers will be added to the image.
If xhr is null and an XMLHttpRequest is needed, one is created. An ajaxOptions object will be added to the request in this case.
Additionally, either imgCrossOrigin or ajaxWithCredentials will be used to decide how Cross-Origin requests will be handled. See those properties for more information on handling Cross-Origin Resource Sharing (CORS) issues.
After all setup has completed, the static event preSend is fired to provide a final opportunity for changes to the request. If ImageLoaderPreSendEventArgs.cancel is set to true, then the fail and always callbacks will be called.
Image loading then begins. When the load completes, the done or fail, (and in either case, the always) events will fire, depending on the result. If successful, the width, height, isHTMLImageElement, and element properties should all have correct values. Otherwise, the error property will contain an error.
Depending on the presence of imagesHolder and the type of image being loaded, the image may temporarily be added to the DOM. If this is the case, the image will be automatically removed when the image is appended somewhere else.
If the urlMode is ImageLoaderUrlMode.ajaxDataUrl or ImageLoaderUrlMode.ajaxXml, and the resulting image is an HTML Image Element (that is, the isHTMLImageElement is true),
there is a chance that the src attribute of element will not be equal to the original url. Instead, it may be a data/blob URI.
When using the ImageLoaderUrlMode.ajaxDataUrl mode specifically, the processAjaxData callback can be used to access the actual binary data from the response.
This is helpful for decryption.
If the url to be loaded is a data URI, it will always be loaded as ImageLoaderUrlMode.imageUrl.
After all callbacks are run, dispose is called on the ImageLoader. Each ImageLoader instance is meant for a single use. To stop the request and not trigger callbacks, use abort or dispose at any time.
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 easilyimageLoader["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 resultpublic 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 endimageLoader.dispose();}}