Use AssetListLoader to load assets in AppBase.preload

src/framework/app-base.js

@@ -42,6 +42,7 @@
     RESOLUTION_AUTO, RESOLUTION_FIXED
 } from './constants.js';
 import { Asset } from './asset/asset.js';
+import { AssetListLoader } from './asset/asset-list-loader.js';
 import { AssetRegistry } from './asset/asset-registry.js';
 import { BundleRegistry } from './bundle/bundle-registry.js';
 import { ComponentSystemRegistry } from './components/registry.js';
@@ -707,9 +708,7 @@
         this.fire('preload:start');
 
         // get list of assets to preload
-        const assets = this.assets.list({
-            preload: true
-        });
+        const assets = this.assets.filter(asset => asset.preload === true && asset.loaded === false)
 
         if (assets.length === 0) {
             this.fire('preload:end');
@@ -719,25 +718,18 @@
 
         let loadedCount = 0;
 
-        const onAssetLoadOrError = () => {
+        const onAssetLoad = () => {
             loadedCount++;
             this.fire('preload:progress', loadedCount / assets.length);
-
-            if (loadedCount === assets.length) {
-                this.fire('preload:end');
-                callback();
-            }
         };
 
-        // for each asset
-        assets.forEach((asset) => {
-            if (!asset.loaded) {
-                asset.once('load', onAssetLoadOrError);
-                asset.once('error', onAssetLoadOrError);
-                this.assets.load(asset);
-            } else {
-                onAssetLoadOrError();
-            }
+        const assetListLoader = new AssetListLoader(assets, this.assets);
+
+        assetListLoader.on('progress', onAssetLoad);
+
+        assetListLoader.load(() => {
+            this.fire('preload:end');
+            callback();
         });
     }
 

test/framework/application.test.mjs

@@ -1,6 +1,7 @@
 import { expect } from 'chai';
 
+import { Asset } from '../../src/framework/asset/asset.js';
 import { AssetRegistry } from '../../src/framework/asset/asset-registry.js';
 import { ComponentSystemRegistry } from '../../src/framework/components/registry.js';
 import { FILLMODE_KEEP_ASPECT, RESOLUTION_FIXED } from '../../src/framework/constants.js';
 import { Entity } from '../../src/framework/entity.js';
@@ -19,6 +20,7 @@
 describe('Application', function () {
 
     let app;
+    const assetPath = 'http://localhost:3000/test/assets/';
 
     beforeEach(function () {
         jsdomSetup();
@@ -89,4 +91,43 @@
 
     });
 
+    describe('#preload', function () {
+
+        it('should preload assets with preload set to true', function (done) {
+            const assets = [
+                new Asset('model', 'container', { url: `${assetPath}test.glb` }),
+                new Asset('styling', 'css', { url: `${assetPath}test.css` })
+            ];
+            assets.forEach((asset) => {
+                asset.preload = true;
+                app.assets.add(asset);
+            });
+
+            app.preload(function () {
+                assets.forEach((asset) => {
+                    expect(asset.loaded).to.be.true;
+                });
+                done();
+            });
+        });
+
+        it('should not preload assets with preload set to false', function (done) {
+            const assets = [
+                new Asset('model', 'container', { url: `${assetPath}test.glb` }),
+                new Asset('styling', 'css', { url: `${assetPath}test.css` })
+            ];
+            assets.forEach((asset) => {
+                app.assets.add(asset);
+            });
+
+            app.preload(function () {
+                assets.forEach((asset) => {
+                    expect(asset.loaded).to.be.false;
+                });
+                done();
+            });
+        });
+
+    });
+
 });