# P5 starts drawing only after web page is done loading

**URL:** <https://discourse.processing.org/t/p5-starts-drawing-only-after-web-page-is-done-loading/28829>\
**Category:** p5.js\
**Created:** [March 25, 2021, 10:09am UTC](https://discourse.processing.org/t/p5-starts-drawing-only-after-web-page-is-done-loading/28829 "2021-03-25T10:09:23Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![ravenwit](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ravenwit/32/12561_2.png) [@ravenwit](https://discourse.processing.org/u/ravenwit)\
**Post date:** [March 25, 2021, 10:09am UTC](https://discourse.processing.org/t/p5-starts-drawing-only-after-web-page-is-done-loading/28829/1 "2021-03-25T10:09:23Z")

</div>

I have written a preloader animation (supposed to be showed while page is loading in background) with p5 javascript library. But I observed that the animation did not start until the entire web page was loaded up, in my case a large image. This behaviour completely ruined the purpose of a preloader. I have also written an almost similar animation with javascript native ‘canvas’ and ‘setInterval’ features. To my surprise, this time, everything worked as expected. I suppose that p5.js calls ‘draw’ function after purser has finished loading html elements. Is there a way around to alter that?

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [March 25, 2021, 10:22pm UTC](https://discourse.processing.org/t/p5-starts-drawing-only-after-web-page-is-done-loading/28829/2 "2021-03-25T22:22:43Z")

</div>

Hi,

Are you loading your images with p5js? If so, are you using the [`preload()`](https://p5js.org/reference/#/p5/preload) function?

The `preload()` function is blocking but if you want asynchronous loading, it says :

> If asynchronous loading is preferred, the load methods can instead be called in [setup()](https://p5js.org/reference/#/p5/setup) or anywhere else with the use of a callback parameter.

Otherwise, look like you can customize the loading message when waiting for a file to load :

> By default the text “loading…” will be displayed. To make your own loading page, include an HTML element with id “p5\_loading” in your page. More information [here](http://bit.ly/2kQ6Nio).

> **[p5.js overview](https://github.com/processing/p5.js/wiki/p5.js-overview#loading-screen)**
>
> p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Proces...

Maybe your issue is related to the order of the script tags inside your html or if you are using defer and async :

> **[Scripts: async, defer](https://javascript.info/script-async-defer)**

---

<div class="post-metadata">

**Author:** ![ravenwit](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ravenwit/32/12561_2.png) [@ravenwit](https://discourse.processing.org/u/ravenwit)\
**Post date:** [March 27, 2021, 9:28pm UTC](https://discourse.processing.org/t/p5-starts-drawing-only-after-web-page-is-done-loading/28829/3 "2021-03-27T21:28:39Z")

</div>

Thanks for your reply.

#### I am not loading images with the preload() function.

#### I am using p5.js to animate the Preloader. So, if the script itself does not start drawing until the preload() function is done loading resources, then it actually makes no point. That’s why I did not use the preload() function.

#### Since I am not using defer or async, it should work theoretically.

#### A bunch of possible order of the scripts tags were tried. But unfortunately none of them worked.

I uploaded a basic version to codepen. Here is the [link](https://codepen.io/ravenwit/full/yLgJNQM).

P. S. An image from wikimedia is included in the html to test the Preloader. And browser cache had to be deleted for testing purpose.

P.S.S I built the whole thing without the help of p5.js library in simple javascript (with canvas and setInterval() ). It is now working as expected.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [March 28, 2021, 1:27pm UTC](https://discourse.processing.org/t/p5-starts-drawing-only-after-web-page-is-done-loading/28829/4 "2021-03-28T13:27:14Z")

</div>

> [@ravenwit](#):
>
> But I observed that the animation did not start until the entire web page was loaded up, in my case a large image.

You can write your sketch using the “instance mode” which theoretically starts running even before the web page finishes loading:

> **[Global and instance mode](https://github.com/processing/p5.js/wiki/Global-and-instance-mode)**
>
> p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Proces...

If you prefer “global mode” you can use the `new p5;` trick I did on my sketch below:

```auto
window.mocha = 'Hack to block p5.js auto global instantiation.';
new p5; // Prematurely instantiates p5.js so its props are available now.
window._setupDone = undefined; // Blocks duplicate instantiation warn.

```

> **[Sierpinski Pentagon \[p5.js\] - GoToLoop - OpenProcessing](https://openprocessing.org/sketch/955445)**