# Load dynamic background

**URL:** <https://phaser.discourse.group/t/load-dynamic-background/10182>\
**Category:** Phaser 3\
**Created:** [August 28, 2021, 12:36am UTC](https://phaser.discourse.group/t/load-dynamic-background/10182 "2021-08-28T00:36:05Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![3b33](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/3b33/32/3334_2.png) [@3b33](https://phaser.discourse.group/u/3b33)\
**Post date:** [August 28, 2021, 12:36am UTC](https://phaser.discourse.group/t/load-dynamic-background/10182/1 "2021-08-28T00:36:05Z")

</div>

I’m loading a json file in the preload function and then would like to load a background based on the contents of that json file. Is this all doable inside the preload function?

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [August 28, 2021, 2:21pm UTC](https://phaser.discourse.group/t/load-dynamic-background/10182/2 "2021-08-28T14:21:17Z")

</div>

You can add a callback within `preload()`. But it won’t run when `preload()` is run, only afterwards.

---

<div class="post-metadata">

**Author:** ![3b33](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/3b33/32/3334_2.png) [@3b33](https://phaser.discourse.group/u/3b33)\
**Post date:** [August 28, 2021, 7:59pm UTC](https://phaser.discourse.group/t/load-dynamic-background/10182/3 "2021-08-28T19:59:35Z")

</div>

I spent the last 6-12 months creating 50 background images so I sorta need to re-learn Phaser callbacks, etc. These images are about 20MB each so I most likely need to make the file sizes smaller. For now, my plan is to preload all or most of these images and then use this to display the image I want:

this.make.image(config1).setOrigin(0);

With ‘this.add.image’ I can’t find a way to use variables but with ‘this.make.image’ I can use variables. Hope I made sense. I know this is probably not the most elegant way to approach this but the other possibility is to create 50 different scene files(?) - each with a unique background image. Right now, I have one game.js file which is about 875kb. Storing 50 files of this size is probably not best practice.