Introducing SuperLoader: a better AS3 library for fetching images

This post is way overdue but in any case, I’d like to introduce (rather belatedly) SuperLoader, an image loading library for AS3. The library grew out of my work when I was building the magazine view for EspressoReader. The magazine view builds a visual grid from the images found in a collection of blogs you are browsing. Here is a screenshot of the experience:

While building the Magazine View, I was faced with a problem. Each “page” of the view read 10 blog entries and then needed to find the most relevant image to show in the interface for each entry. Posts tend to have multiple images and a lot of them are not usable. For example, the image may be a tracking 1×1 pixel image used for analytics or may be too small or large to be effective. Loading each image using a Loader was not feasable since the loader only gave dimension information once loading had been completed and I didnt really want to load a bunch of images completely only to discover they weren’t useful.

The SuperLoader library  takes care of this by actually parsing the binary data in the URLStream that it uses to load the images and can identify very early in the loading process the type and the size of the image being loaded (since that information is available in the first few bytes of the incoming data). Moreover it also includes an api for immediately canceling the load process so that you can jump to the next image in the list of images you are loading. The API looks something like this:

var loader:SuperLoader = new SuperLoader();
loader.addEventListener(SuperLoaderEvent.IMAGE_TYPE_IDENTIFIED, 
                                          onImageTypeIdentified)

loader.addEventListener(SuperLoaderEvent.IMAGE_SIZE_IDENTIFIED,
                                               onImageSizeIdentified);
loader.addEventListener(SuperLoaderEvent.LOAD_COMPLETE, onLoadComplete);

private function onImageTypeIdentified(event:SuperLoaderEvent):void{
  trace(loader.imageType)
}

private function onImageSizeIdentified(event:SuperLoaderEvent):void{
  if(loader.imageWidth < 20 || loader.imageHeight < 20){
   loader.abort();
  }
}

private function onLoadComplete(event:SuperLoaderEvent):void{
  var image:Loader = new Loader();
  addChild(image)
  image.loadBytes(loader.data)
}

The library also includes a SuperLoaderQueue object to manage the load process of multiple images.

The library is released under the MIT open source license and is available on Github.

Author: Arpit Mathur

Arpit Mathur is a Principal Engineer at Comcast Labs where he is currently working on a variety of topics including Machine Learning, Affective Computing, and Blockchain applications. Arpit has also worked extensively on Android and iOS applications, Virtual Reality apps as well as with web technologies like JavaScript, HTML and Ruby on Rails. He also spent a couple of years in the User Experience team as a Creative Technologist. View all posts by Arpit Mathur