# How do the p5.js preload functions work?

**URL:** <https://discourse.processing.org/t/how-do-the-p5-js-preload-functions-work/3767>\
**Category:** Development\
**Created:** [September 23, 2018, 3:56pm UTC](https://discourse.processing.org/t/how-do-the-p5-js-preload-functions-work/3767 "2018-09-23T15:56:32Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![FirstProphet](https://avatars.discourse-cdn.com/v4/letter/f/b782af/32.png) [@FirstProphet](https://discourse.processing.org/u/FirstProphet)\
**Post date:** [September 23, 2018, 3:56pm UTC](https://discourse.processing.org/t/how-do-the-p5-js-preload-functions-work/3767/1 "2018-09-23T15:56:32Z")

</div>

I’m just interested in how it was implemented that functions like `loadFont()` or `loadImage()` can be called with a callback or in the preload function. How does p5.js know, when preload is done and when it is save to call setup. And how are the loaded resources placed into the variables? I’ve read somewhere online that it’s done with some kind of counter, but how does p5.js know how many functions you called inside the preload-function and what the counter is supposed to be set to?

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [September 24, 2018, 12:38am UTC](https://discourse.processing.org/t/how-do-the-p5-js-preload-functions-work/3767/2 "2018-09-24T00:38:02Z")

</div>

P5.js is open-source, so you can see exactly how the `preload()` function works by looking at the code [here](https://github.com/processing/p5.js/blob/master/src/core/main.js).

Do a ctrl+f for “preload” in that file to read through the functions related to preloading.

---

<div class="post-metadata">

**Author:** ![FirstProphet](https://avatars.discourse-cdn.com/v4/letter/f/b782af/32.png) [@FirstProphet](https://discourse.processing.org/u/FirstProphet)\
**Post date:** [September 24, 2018, 1:22am UTC](https://discourse.processing.org/t/how-do-the-p5-js-preload-functions-work/3767/3 "2018-09-24T01:22:28Z")

</div>

I actually did look at the source code beforehand, but didn’t understand it…

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [September 25, 2018, 5:52pm UTC](https://discourse.processing.org/t/how-do-the-p5-js-preload-functions-work/3767/4 "2018-09-25T17:52:03Z")

</div>

What part of the code do you have questions about? What don’t you understand?

While asking your question, note that you can click on line numbers next to the github source code to get a more specific url, then cut and paste that URL into the forum, like this (line 600):

> <https://github.com/processing/p5.js/blob/master/src/core/main.js#L600-L612>

---

<div class="post-metadata">

**Author:** ![xxnavixx](https://avatars.discourse-cdn.com/v4/letter/x/96bed5/32.png) [@xxnavixx](https://discourse.processing.org/u/xxnavixx)\
**Post date:** [February 12, 2019, 1:09am UTC](https://discourse.processing.org/t/how-do-the-p5-js-preload-functions-work/3767/5 "2019-02-12T01:09:02Z")

</div>

I am sorry. may i ask where is decrement part?  
I only see\_decrementPreload() declaration but there is no line used this fucntion

> <https://github.com/processing/p5.js/blob/8c84128b32a095b870e05358f1dfabdf79ac38ce/src/core/main.js#L292-L298>

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [February 15, 2019, 5:50am UTC](https://discourse.processing.org/t/how-do-the-p5-js-preload-functions-work/3767/6 "2019-02-15T05:50:41Z")

</div>

> [@xxnavixx](#):
>
> may i ask where is decrement part?

I think you are asking where in code is \_decrementPreload called? You can find all references using github search:

[https://github.com/processing/p5.js/search?q=\_decrementPreload&unscoped\_q=\_decrementPreload](https://github.com/processing/p5.js/search?q=_decrementPreload&unscoped_q=_decrementPreload)

---

<div class="post-metadata">

**Author:** ![STEMcoding](https://avatars.discourse-cdn.com/v4/letter/s/f07891/32.png) [@STEMcoding](https://discourse.processing.org/u/STEMcoding)\
**Post date:** [June 1, 2019, 7:48pm UTC](https://discourse.processing.org/t/how-do-the-p5-js-preload-functions-work/3767/7 "2019-06-01T19:48:28Z")

</div>

Could someone tell me if this is the correct way to use registerPreloadMethod?

[https://editor.p5js.org/ChrisOrban/sketches/nlsT8N4mg](https://editor.p5js.org/ChrisOrban/sketches/nlsT8N4mg)

The first time you press play there is a 1-2 second delay before the video starts. I really need the video to start right as the sketch starts to run. If you press stop and then play it will sync up but I need it to do this the first time. That’s why the preload function exists right?