Babylon.js

# Create a preloader **URL:** \ **Category:** Questions\ **Created:** [July 28, 2020, 3:42pm UTC](https://forum.babylonjs.com/t/create-a-preloader/12950 "2020-07-28T15:42:31Z")\ **Posts on this page:** 10\ **Page:** 1

**Author:** ![saifshk17](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/saifshk17/32/1418_2.png) [@saifshk17](https://forum.babylonjs.com/u/saifshk17)\ **Post date:** [July 28, 2020, 3:42pm UTC](https://forum.babylonjs.com/t/create-a-preloader/12950/1 "2020-07-28T15:42:31Z")

Hi people, I have 2 heavy things in my scene, a 3D model and an image. First the smaller images load and then the heavier models load. Is there a way to assign a preloader so that the app only loads when everything else has been loaded? ``` ``` ``` Babylon.js

``` `Preformatted text` ---

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\ **Post date:** [July 28, 2020, 4:07pm UTC](https://forum.babylonjs.com/t/create-a-preloader/12950/2 "2020-07-28T16:07:05Z")

Hello, I’m not sure to understand What do you want to delay load? The js files or your scene? ---

**Author:** ![saifshk17](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/saifshk17/32/1418_2.png) [@saifshk17](https://forum.babylonjs.com/u/saifshk17)\ **Post date:** [July 28, 2020, 4:18pm UTC](https://forum.babylonjs.com/t/create-a-preloader/12950/3 "2020-07-28T16:18:43Z")

Sorry, what I meant was, I want to delay it. As in, I only want the user to see the scene once everything in the scene has been loaded. The includes images, meshes etc. So due to this I want to implement a preloader. ---

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\ **Post date:** [July 28, 2020, 4:21pm UTC](https://forum.babylonjs.com/t/create-a-preloader/12950/4 "2020-07-28T16:21:51Z")

oh so you can probably rely on: ```auto scene.executeWhenReady(() => { .. start rendering here }); ``` ---

**Author:** ![saifshk17](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/saifshk17/32/1418_2.png) [@saifshk17](https://forum.babylonjs.com/u/saifshk17)\ **Post date:** [July 28, 2020, 4:31pm UTC](https://forum.babylonjs.com/t/create-a-preloader/12950/5 "2020-07-28T16:31:36Z")

Thanks, where should I paste this? Could you please show me in a sample background player? Also can you suggest a preloader example that I use along with this? ---

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\ **Post date:** [July 28, 2020, 4:40pm UTC](https://forum.babylonjs.com/t/create-a-preloader/12950/6 "2020-07-28T16:40:17Z")

Can you share your current code somewhere? ---

**Author:** ![saifshk17](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/saifshk17/32/1418_2.png) [@saifshk17](https://forum.babylonjs.com/u/saifshk17)\ **Post date:** [July 28, 2020, 5:23pm UTC](https://forum.babylonjs.com/t/create-a-preloader/12950/7 "2020-07-28T17:23:45Z")

I will try to add it to Playground, it will take some time. In the meanwhile I have added the whole code here, where should I implement your solution? ---

**Author:** ![saifshk17](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/saifshk17/32/1418_2.png) [@saifshk17](https://forum.babylonjs.com/u/saifshk17)\ **Post date:** [July 28, 2020, 5:27pm UTC](https://forum.babylonjs.com/t/create-a-preloader/12950/8 "2020-07-28T17:27:16Z")

> [@Deltakosh](#): > > `scene.executeWhenReady(() => {` I got it, i added your solution as: ``` scene.executeWhenReady(() => { engine.runRenderLoop(function () { if (sceneToRender) { sceneToRender.render(); } }); }); ``` Now I have to create a preloader showing percentage of completion. Is there a way to achieve this? ---

**Author:** ![DisownedWheat](https://avatars.discourse-cdn.com/v4/letter/d/3be4f8/32.png) [@DisownedWheat](https://forum.babylonjs.com/u/DisownedWheat)\ **Post date:** [July 30, 2020, 3:11am UTC](https://forum.babylonjs.com/t/create-a-preloader/12950/9 "2020-07-30T03:11:59Z")

I’d use an [Asset Manager](https://doc.babylonjs.com/how_to/how_to_use_assetsmanager). It has an `onProgress` callback that you can use to update a loading bar on screen [Load Files with Assets Manager - Babylon.js Documentation](https://doc.babylonjs.com/how_to/how_to_use_assetsmanager#manager-callbacks-and-observables) ---

**Author:** ![Pieter](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pieter/32/13656_2.png) [@Pieter](https://forum.babylonjs.com/u/Pieter)\ **Post date:** [February 8, 2021, 11:43am UTC](https://forum.babylonjs.com/t/create-a-preloader/12950/10 "2021-02-08T11:43:27Z")

This way is interesting if there are a lot of smaller files equal in size. What if I have a more complex model with a larger size. Is there a way to present the actual progress based on x kb/ total kb loaded? Thanks Pieter