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.