New ImageLoader and LoadingQueue classes

I’ve finally found the time to add content to the Projects page of this website, and I’m gonna do it by introducing the ImageLoader class (actionscript 2 only). Simply put,

import zeh.loading.ImageLoader;
var myImgLoader:ImageLoader = new ImageLoader(whateverMC);
myImgLoader.loadImage("whatever.jpg");

What does make it different? Well, it uses BitmapData caching, handles its own loading queue with variable priority control, and works by attaching the image (with smooth on) instead of actually loading the content on the container. Because of this, simultaneous downloads of the same content can occur seamlessly on two different locations, and additional loadings are attached from the image cache instead of reloaded from the web or the browser cache.

And since ImageLoader depends on it, the LoadingQueue class is also available for download. It simplifies the loading of MovieClip content with internal queuing, priority control, and the ability to use different queue groups.

The classes are not really new and I’ve been using them for a while on my own work, but I guess someone can find them useful so I’m putting them on my public subversion server. Anyhow, more information and download of both of them here.

  • kent

    Just a quick question about the LoadingQueue – does it support the events like complete and init?

    Thanks.

  • Zeh

    Hey Kent,

    No. Since what it does is just working like a loading proxy, all it does is delay the loading procedure for when it’s time to start.

    In short, this…

    mymc.loadMovie(“a.swf”);
    this.onEnterFrame = function() {
    trace (“mymc loaded “+mymc.getBytesLoaded()+” bytes”);
    };

    …can turn into this:

    var lq:LoadingQueue = new LoadingQueue();
    lq.addMovie(mymc, “a.swf”);
    this.onEnterFrame = function() {
    trace (“mymc loaded “+mymc.getBytesLoaded()+” bytes”);
    };

    There is, loading init/update/complete events would have to be setup separately “as usual”.

    It makes sense to have specific events as you suggest, it’s just that I never felt the need for that since I always have my own events setup somewhere else.

  • Nice job with these two classes.

    I noticed in the comments of the ImageLoader class you mentioned: “TODO: allow an overwrite of the url if a second loadImage is done?”

    Is there any possibility of this feature being added, I’m noticing some pretty eratic behaviour when an image is attempted to be loaded twice in quick succession.

    Thanks.

  • Zeh

    Thanks, Jason.

    Possibility, yes. Shouldn’t be too difficult, just a quick list verification. Unfortunately, not too soon, however; I’m drowning in a sea of work to do, and I wouldn’t have the time to properly stress-test it on the correct environment just now. πŸ™

  • That’s ok, I know the feeling πŸ˜‰ I’ll keep my eyes peeled for a possible update in the future.

  • paddy

    hi Zeh, good work. One feature that would be good is:
    re-prioritizing. I often need to do this when using a PriorityQueue/LoadQueue πŸ˜‰

  • Fernando Silva

    Hi,

    the LoadingQueue class with support for listeners (like MovieClipLoader) would make this awesome, because we could know the begin, end and how much it was already loaded.

    Do you accept code from others to be included on your own?

  • Zeh

    Fernando: yep, I thought about it a bit. It’s just that I don’t use MovieClipLoader so I never put too much thought about it.

    About contributing: those classes are released as open-source. So anyone can extend them and release it on their own. Although they don’t have any license attached, right now I expect people to be fair use of it, including mentioning the source if they do extend and re-release a version of their own.

  • Hi there zeh!

    I really find your classes to be extremely useful. I’ve started to use tweener and I love it!! Your classes are always so easy to use…
    How can I detect if an external asset has completed loading with the queue class? I’m so used to using MoviClipLoader…
    What I have is this:

    var lq:LoadingQueue = new LoadingQueue(this, 1);

    lq.addMovie(this.hus.husImg, “img/index_hus.jpg”, 1);
    lq.addMovie(this.frisk.friskImg, “img/index_frisk.jpg”, 2);
    lq.start();

    bytes_loaded = _root.frisk.friskImg.getBytesLoaded();
    bytes_total = _root.frisk.friskImg.getBytesTotal();

    this.onEnterFrame = function() {
    if(bytes_loaded==bytes_total){
    trace (“loaded”);
    XMLParser.load(“xml/index.xml”, onFinish, myXML);
    }else{
    }
    }
    But the trace starts as soon as the first img begin loading with the queue class – I just don’t get what I’m doing wrong here…
    Somethings wrong with this detection – probably something obvious that I just can’t see… πŸ™‚

  • Zeh

    Hey Niklas,

    The LoadingQueue is just a queue; it’s just used to delay certain loading procedures. Because of this, it doesn’t really replace MovieClipLoader, nor act as a loading control. The reason why I build LoadingQueue this way is because I always use loading verification somewhere else, so it fits my own needs more than anything.

    If you want to know if something has finished loading, you’d need some external verification. Your onEnterFrame works, but you’d need to read the data internally, as in

    this.onEnterFrame = function() {
        var bytes_loaded = _root.frisk.friskImg.getBytesLoaded();
        var bytes_total = _root.frisk.friskImg.getBytesTotal();
        if(bytes_loaded == bytes_total && bytes_total > 10) {
            trace (”loaded”);
        }
    }

    However, if you’re used to using MovieClipLoader, maybe you don’t need to change. This LoadingQueue is just a small step and maybe there are other queues out there that tie better with MovieClipLoader.

  • Hi Zeh and others,

    I am having performance issues when trying to use the ImageLoader class with a larger number of files (~400). It appears that the problem is in the “tick” function and the fast that it re-evaluates all files in the queue, not just those that are currently loading.

    Has anyone else seen anything like this or have any suggestions to improve performance?

    I’ll keep digging myself (hopefully not into a hole…) and if i find something i will provide feedback.

  • Zeh

    Neil: although I’ve used this with hundreds of files loading at the same time, you may as well be right.. I haven’t done extensive performance tests.

    I probably won’t go back into it now as I’m using an equivalent AS3 class now, but if you find what’s the problem, be sure to post it/let me know.

  • Hi Zeh,

    The problem is with “polling” the complete active queue on every cycle within “tick”. As the number of images increases the overhead becomes too much.

    The solution would be to use callbacks from the queue to notify once an image is loaded, and then take action only on that. Unfortunately it is still not obvious to me how to do that as i need to get a little more familiar with the code.

    Is the AS3 class that you are using of your own creation, or part of the standard library?

  • Zeh

    Neil: they’re code of my own, having a similar approach as these classes (ie, simplified loading) but using a more AS3-ish approach. Ie, the LoadingQueue uses events only.

    Unfortunately they’re not polished enough for release.

  • Thomas

    Hi Zeh!

    I’m using “ImageLoader.as” to preload a dynamic number of images. Which images to load is determined by an XML-file that contains 1->n number of image URL’s. Using a for-loop I create a new ImageLoader for each image in the XML-file. Each ImageLoader is placed in an array for easy access, like this:

    loaderArr[i] = new ImageLoader(item);

    All this works great and the images load just like they should and I get feedback on the amount of percent that each image has loaded.

    The problem is that I would like to display how many percent are loaded for the TOTAL amount of images, not just an individual image. Each ImageLoader has the onUpdate event, but that only reports the loaded percentage of the particular instance to which the onUpdate event belongs, not the percentage of the whole loading queue.

    Do you have an example showing how I can report the loading status (in percent) for all the images in the queue? Is this possible to do at all? I’m fairly new to AS, but have worked as a web developer for many years. All things I’ve tried so far has failed.

    Thanks in advance!
    /Thomas

  • Siemer

    @Thomas: take a look at this class (http://www.actionscriptclasses.com/2008/queueloader-as2/), it at least pretends to do what you are looking for. The faking of the total loading progress could work for a lot of images of about the same size.