diff --git a/src/framework/app-base.js b/src/framework/app-base.js index 077bdedf9f2..a20016b3b1c 100644 --- a/src/framework/app-base.js +++ b/src/framework/app-base.js @@ -42,6 +42,7 @@ import { 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 @@ class AppBase extends EventHandler { 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 @@ class AppBase extends EventHandler { 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(); }); } diff --git a/test/framework/application.test.mjs b/test/framework/application.test.mjs index 30d5f4a9a7d..0e9b800036b 100644 --- a/test/framework/application.test.mjs +++ b/test/framework/application.test.mjs @@ -1,6 +1,7 @@ import { expect } from 'chai'; import { AssetRegistry } from '../../src/framework/asset/asset-registry.js'; +import { Asset } from '../../src/framework/asset/asset.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 @@ import { jsdomSetup, jsdomTeardown } from '../jsdom.mjs'; describe('Application', function () { let app; + const assetPath = 'http://localhost:3000/test/assets/'; beforeEach(function () { jsdomSetup(); @@ -89,4 +91,43 @@ describe('Application', function () { }); + 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(); + }); + }); + + }); + });