thinkpixellab / PxLoader

PxLoader is a simple JavasScript library for creating preloaders and resource downloaders for HTML5 apps.

Home Page:http://thinkpixellab.com/pxloader

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

images do not download in order specified by tags

neoshamangames opened this issue · comments

I have the following:

    loader = new PxLoader();

    //title page
    for(var i=0; i<titlePageImages.length; i++)
    {
        pxImage = new PxLoaderImage(titlePageImages[i], "titlePage");
        pxImage.imageNumber = i + 1;
        loader.add(pxImage);

    }

    loader.addProgressListener(function(e) { 
        console.log("titlePage: " + e.completedCount + ' / ' + e.totalCount); 

    }, "titlePage");

    loader.addCompletionListener(function(e) { 
        console.log('Title Page Loaded'); 
    }, "titlePage");

    //main
    for(i=0; i<mainImages.length; i++)
    {
        pxImage = new PxLoaderImage(mainImages[i], "main");
        pxImage.imageNumber = i + 1;
        loader.add(pxImage);


    }

    loader.addProgressListener(function(e) { 
        console.log("main: " + e.completedCount + ' / ' + e.totalCount); 

    }, "main");


    loader.addCompletionListener(function(e) { 
        console.log('Main Assets Loaded'); 
    }, "main");

    loader.start(["titlePage", "main"]);

And I am getting this output in the console:

titlePage: 1 / 7
titlePage: 2 / 7
titlePage: 3 / 7
titlePage: 4 / 7
main: 1 / 17
main: 2 / 17
main: 3 / 17
main: 4 / 17
main: 5 / 17
titlePage: 5 / 7
main: 6 / 17
main: 7 / 17
main: 8 / 17
main: 9 / 17
main: 10 / 17
main: 11 / 17
main: 12 / 17
main: 13 / 17
main: 14 / 17
main: 15 / 17
titlePage: 6 / 7
main: 16 / 17
titlePage: 7 / 7
Title Page Loaded
main: 17 / 17
Main Assets Loaded

As you can see the elements tagged with "main" start downloading before the "titlePage" elements have completed.

Prioritization by tag controls the order in which assets are requested, not completed. Modern browsers allow anywhere from 6-12 concurrent requests. So I could imagine that a small "main" asset might finish before a large "titlePage" asset even if it was requested afterwards. If for some reason you didn't want any "main" assets to begin downloading until all "titlePage" assets had completed, I'd just use two separate instances of PxLoader and start the second one on completion of the first.