thinkpixellab / PxLoader

PxLoader is a simple JavasScript library for creating preloaders and resource downloaders for HTML5 apps.
http://thinkpixellab.com/pxloader
1.11k stars 173 forks source link

images do not download in order specified by tags #57

Closed neoshamangames closed 8 years ago

neoshamangames commented 8 years ago

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.

joelfillmore commented 8 years ago

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.