# A loadXXX() call inside preload() doesn't delay draw()

**URL:** <https://discourse.processing.org/t/a-loadxxx-call-inside-preload-doesnt-delay-draw/39354>\
**Category:** Coding Questions\
**Created:** [October 19, 2022, 4:55am UTC](https://discourse.processing.org/t/a-loadxxx-call-inside-preload-doesnt-delay-draw/39354 "2022-10-19T04:55:25Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![ubuntu-in-a-nutshell](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ubuntu-in-a-nutshell/32/16992_2.png) [@ubuntu-in-a-nutshell](https://discourse.processing.org/u/ubuntu-in-a-nutshell)\
**Post date:** [October 19, 2022, 4:55am UTC](https://discourse.processing.org/t/a-loadxxx-call-inside-preload-doesnt-delay-draw/39354/1 "2022-10-19T04:55:25Z")

</div>

Occasionally when my program loads images using `loadImage` the program fails to load them and then it gets stuck in the loading screen. When I look in the console it says `img is undefined`. Tracing this back, I find it happened when the program tried to draw a p5.Image in `draw()` that was loaded in `preload()`. Any ideas why this might happen or how to fix it would be heavily appreciated.

---

<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:** [October 19, 2022, 7:26am UTC](https://discourse.processing.org/t/a-loadxxx-call-inside-preload-doesnt-delay-draw/39354/2 "2022-10-19T07:26:44Z")

</div>

Hi @ubuntu-in-a-nutshell,

> [@ubuntu-in-a-nutshell](#):
>
> using `loadImage` the program fails to load them

Can you be more precise about “fails to load them”? Because if for example the url of an image is wrong, it will stop the sketch before doing any `draw()` iteration.

Which loading failure are you talking about?

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [October 19, 2022, 7:39am UTC](https://discourse.processing.org/t/a-loadxxx-call-inside-preload-doesnt-delay-draw/39354/3 "2022-10-19T07:39:10Z")

</div>

Hi

To get answers you need to post your sketch

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [October 19, 2022, 10:29am UTC](https://discourse.processing.org/t/a-loadxxx-call-inside-preload-doesnt-delay-draw/39354/4 "2022-10-19T10:29:41Z")

</div>

@ubuntu-in-a-nutshell, we need to know where and how you defined your variables. You can show us this along with other details that may be relevant by posting your code. Then we can test it, and experiment with possible solutions.

---

<div class="post-metadata">

**Author:** ![ubuntu-in-a-nutshell](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ubuntu-in-a-nutshell/32/16992_2.png) [@ubuntu-in-a-nutshell](https://discourse.processing.org/u/ubuntu-in-a-nutshell)\
**Post date:** [October 24, 2022, 6:28am UTC](https://discourse.processing.org/t/a-loadxxx-call-inside-preload-doesnt-delay-draw/39354/5 "2022-10-24T06:28:28Z")

</div>

This only happens sometimes (and always after loading the resources for the first time). The behaviour of my program is mostly fine, sometimes it takes many reloads to get it to get stuck. Here’s my code.  
Source script:

> <https://github.com/Buggem/GN9/blob/main/src/main.js>

([https://buggem.github.io/GN9/src/main.js](https://buggem.github.io/GN9/src/main.js) is the published version of the script)

Published game:  
[https://buggem.github.io/GN9/](https://buggem.github.io/GN9/)

---

<div class="post-metadata">

**Author:** ![ubuntu-in-a-nutshell](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ubuntu-in-a-nutshell/32/16992_2.png) [@ubuntu-in-a-nutshell](https://discourse.processing.org/u/ubuntu-in-a-nutshell)\
**Post date:** [October 24, 2022, 6:42am UTC](https://discourse.processing.org/t/a-loadxxx-call-inside-preload-doesnt-delay-draw/39354/6 "2022-10-24T06:42:55Z")

</div>

I just got it to happen. Here are some images of my game. The background is supposed to be black, it’s a CSS rule I made, but the text is not supposed to be hidden.

Screen before highlighting text

 ![error_reg](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/a/0/a06277cb0d7ffab72e56eb200cd56d930ea2577c.png)  
Screen after highlighting text  
 ![error_highlighted](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/c/a/cab20f8bbb2d992ea1195b5644f2baf5bc779d49.png)

All errors:

 ![error_logs](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/7/1/71e546247df4ed255a53f0130a8176c62f09314d.png)

I think the resources probably weren’t loaded correctly, and now I will probably put a callback if it fails and in the callback reload the resource. I don’t want this to lead to `InternalError: Too much recursion` though.

---

<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:** [October 24, 2022, 8:01am UTC](https://discourse.processing.org/t/a-loadxxx-call-inside-preload-doesnt-delay-draw/39354/7 "2022-10-24T08:01:01Z")

</div>

> [@ubuntu-in-a-nutshell](#):
>
> I think the resources probably weren’t loaded correctly,

I’ve quickly looked at your **preload()** callback from your “main.js” file.

Before anything else it’s completely unnecessary to use `\/`. Just go w/ a single slash character `/`.

Back to my finding, this statement below is wrong:

```auto
lines.menu = p.loadStrings(`${assets}\/menu.txt`).join('\n');

```

The reason why is b/c you invoke method Array::**join()** over an array which is still empty.

That is, function **loadStrings()** returns an empty array which will eventually be filled up w/ the text contents of a file.

Until the loading is fully complete we shouldn’t do anything w/ the returned array.

If you need to, create a success callback for it:

```auto
p.loadStrings(`${assets}/menu.txt`, arr => lines.menu = arr.join('\n'));

```

Or alternatively you can later make the final changes within **setup()** callback instead:

```auto
p.preload = function() {
  lines.menu = p.loadStrings(`${assets}/menu.txt`);
}

p.setup = function() {
  lines.menu = lines.menu.join('\n');
}

```