How To: Cancel Loading an Image in the JS ImageViewer

How to cancel loading in an image using the LEADTOOLS ImageViewer.

When loading an image into your imageviewer, there are certain instances where you will want to stop
loading an image in, and load a different image into the viewer.
While LEADTOOLS has a method for stopping the loading of an image into an imageviewer,
The abort Method- cancels the ImageLoader which is used to load image files with support for callbacks on
success and failure.

If the user is prevented from being able to use the ImageLoader, that in turn prevents them from using
the https://www.leadtools.co.../imageloaderurlmode.html
method. Which means that once you abort
you will no longer be able to add new images into the viewer in this way.

So here, we will instead change the images source by using the mutation observer.
I am attaching an example project below that loads in 2 separate images using the setTimeout method.
While we wait for setTimeout, we will switch the source of the URL which will in turn change the image being
loaded in.You can alternatively remove the setTimeout method and instead use the mutation observer to listen to a change in the imageViewer.imageUrl to then set to the imageElement.src in turn modifying the subtree of an image element which causes the DOM to fire a callback without regard to whether or not the content's of the previous image are fully loaded.

Gif Demonstrating working result after setting your filepaths accordingly and adding dependencies

Project Demonstrating Functionality Download

Edited by user Tuesday, July 16, 2019 10:41:34 AM(UTC)  | Reason: Not specified