ImageLoading Event

Occurs just before an image starts loading as the result of a URL update.

Syntax

JavaScript

add_imageLoading(function(sender, e))
imageLoading.add(function(sender, e))
remove_imageLoading(function(sender, e))
imageLoading.remove(function(sender, e))

Remarks

When ImageUrl, BackImageUrl, Url, or BackImageUrl is set, a new ImageLoader is created to handle the loading process. Just before Run is called, the ImageLoading event is fired to give callbacks a chance to modify properties of the image load through ImageLoader. Properties such as UrlMode can be changed, and if the request uses AJAX (per, for example, AjaxDataUrl) then headers can be added or changed via Headers.

This event will also be fired when AutoRemoveItemElements is true and an image must be reloaded because an ImageViewerItem comes back into view.

Example

JavaScript

var div = document.getElementById("imageViewer");
var createOptions = new lt.Controls.ImageViewerCreateOptions(div);
// Set a layout and add and item, or default to SingleViewMode
createOptions.viewLayout = new lt.Controls.ImageViewerVerticalViewLayout();
// This example could also work with ElementsMode
//createOptions.useElements = true;
var viewer = new lt.Controls.ImageViewer(createOptions);

viewer.imageLoading.add(function (sender, e) {
   // We now have access to imageLoader and item
   // We can change any settings we want
   var imageLoader = e.imageLoader;
   console.log("Image about to load: " + imageLoader.url);
});
   
var item = new lt.Controls.ImageViewerItem();
// Image will not load immediately. Must be added to ImageViewer.
item.url = "http://demo.leadtools.com/images/gif/clock.gif";
item.text = "Clock";
   
setTimeout(function () {
   // We set a timeout for 4 seconds, to show that the event
   // will execute right before image is loaded
   viewer.items.add(item);      
}, 4000)

ImageLoading Event

Reference