# Loading bar for loading image

**URL:** <https://discourse.processing.org/t/loading-bar-for-loading-image/44636>\
**Category:** Coding Questions\
**Created:** [June 24, 2024, 8:26pm UTC](https://discourse.processing.org/t/loading-bar-for-loading-image/44636 "2024-06-24T20:26:37Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![bulbx](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bulbx/32/19702_2.png) [@bulbx](https://discourse.processing.org/u/bulbx)\
**Post date:** [June 24, 2024, 8:26pm UTC](https://discourse.processing.org/t/loading-bar-for-loading-image/44636/1 "2024-06-24T20:26:37Z")

</div>

Hello everyone  
_(medium level in p5 / English is not my native language…)_

I am currently making my website in p5, it is almost finished.  
It’s quite simple, a sort of slideshow.

I would like to have a loading bar for loading my images.  
For aesthetic reasons but above all for the practical side :  
I currently have a small graphics bug when the following image is not loaded.  
(when transitioning from one image to another) (these are big images)  
(graphic bug disappears when the image is finally loaded)

I would like to have a “loading bar” to visually validate the end of loading the image  
and launch the transition.  
There is no function in p5 to get the quantity of bytes loaded or the size of the image.

How can I do this? It’s possible?  
I searched a little on my side,  
but I prefer to ask here before going on a false trail.

Thanks in advance 😃  
bulbx

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [June 25, 2024, 2:43am UTC](https://discourse.processing.org/t/loading-bar-for-loading-image/44636/2 "2024-06-25T02:43:55Z")

</div>

Hello @bulbx,

Welcome.

You may want to consider using a callback function.  
The callback would tell you when you are done loading.  
You may be able to adapt this for your code to proceed after loading.

Code below adapted from:  
[Image:\_Load\_and\_Display\_Image](https://editor.p5js.org/p5/sketches/Image:_Load_and_Display_Image)

Code shows time before loading and after.

Cut and paste this over the above code to use the image there:

```auto
let img; // Declare variable 'img'.
let t1, t2;

function setup() {
  createCanvas(720, 400);
  t1 = millis();
  img = loadImage('assets/moonwalk.jpg', ready); // Load the image
}

function draw() {
  // Displays the image at its actual size at point (0,0)
  image(img, 0, 0);
  // Displays the image at point (0, height/2) at half size
  image(img, 0, height / 2, img.width / 2, img.height / 2);
}

function ready()
  {
  t2 = millis();
  tmp = str(t1) + ' ' + str(t2);  
  console.log(tmp)  
  }

```

Reference:  
[https://p5js.org/reference/#/p5/loadImage](https://p5js.org/reference/#/p5/loadImage)

`:)`

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [June 25, 2024, 1:19pm UTC](https://discourse.processing.org/t/loading-bar-for-loading-image/44636/3 "2024-06-25T13:19:52Z")

</div>

One approach would be to put up a ‘thumbnail’ (scaled down) image on the bar as each image is loaded. The following reference shows how to create different sized images from the same file using _resize()_:  
[https://p5js.org/reference/#/p5.Image](https://p5js.org/reference/#/p5.Image)

---

<div class="post-metadata">

**Author:** ![bulbx](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bulbx/32/19702_2.png) [@bulbx](https://discourse.processing.org/u/bulbx)\
**Post date:** [June 25, 2024, 3:50pm UTC](https://discourse.processing.org/t/loading-bar-for-loading-image/44636/4 "2024-06-25T15:50:46Z")

</div>

Ok, thank you both, I’ll look into that.  
I will report back after some tests.

(I’m not sure of your solutions because I need to know the weight of each image)  
(the images are loaded while viewing the site, not in preloading)  
(I load the first image in preloading)

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [June 26, 2024, 6:00am UTC](https://discourse.processing.org/t/loading-bar-for-loading-image/44636/5 "2024-06-26T06:00:52Z")

</div>

Hey, maybe you want to share the current status of the project or example code? I feel you are asking about something specific and a live example would tell much more

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [June 26, 2024, 7:21am UTC](https://discourse.processing.org/t/loading-bar-for-loading-image/44636/6 "2024-06-26T07:21:24Z")

</div>

> [@bulbx](#):
>
> (I’m not sure of your solutions because I need to know the weight of each image)

Write some code to test this and be sure.  
You will not know the size of the image until after loading it.  
I tested this with code.

> [@bulbx](#):
>
> (the images are loaded while viewing the site, not in preloading)

That is fine. Load one at a time and don’t keep reloading in draw.  
Consider adding some variables for the state of the loading and control flow of code.

> [@bulbx](#):
>
> (I load the first image in preloading)

That is ok. I did this as well and used the callback (may not be necessary since it is preload and will test more later).

I built on the example I shared to load one image after another only after each was completed loading. I used a variable called loading and set it to true of false to control the flow of the program and loading.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/3/2/3287f403d106098656cfc1e769c8beb478e3ce89.png)

> [@bulbx](#):
>
> I currently have a small graphics bug when the following image is not loaded.  
> (when transitioning from one image to another) (these are big images)  
> (graphic bug disappears when the image is finally loaded)

This can be addressed with the callback and some additional code.

> [@bulbx](#):
>
> I would like to have a loading bar for loading my images.

You will not know size until after loading.  
You may consider just an animated display saying loading instead of progress which is unknown.

I had around 4ms load times and did not need to add loading animation but could have added that as well.

One step at a time.

`:)`

---

<div class="post-metadata">

**Author:** ![bulbx](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bulbx/32/19702_2.png) [@bulbx](https://discourse.processing.org/u/bulbx)\
**Post date:** [June 27, 2024, 7:32am UTC](https://discourse.processing.org/t/loading-bar-for-loading-image/44636/8 "2024-06-27T07:32:53Z")

</div>

Hello,  
thank you very much for the details  
I’ll look at this and come back quickly with more information.  
(I haven’t coded in a while, I did this last year)

---

<div class="post-metadata">

**Author:** ![bulbx](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bulbx/32/19702_2.png) [@bulbx](https://discourse.processing.org/u/bulbx)\
**Post date:** [July 11, 2024, 9:58am UTC](https://discourse.processing.org/t/loading-bar-for-loading-image/44636/9 "2024-07-11T09:58:33Z")

</div>

Hello,  
I’m coming back after making some improvements to my site.

I wasn’t explicit enough with my previous question, it’s my fault.  
Since I hadn’t coded in a long time, I was a little confused.

I wanted to have a loading bar that indicates the bytes loaded in real time.  
with a callback for the percentage of byte loaded (like on loadSound)

> [@glv](#):
>
> You will not know size until after loading.  
> You may consider just an animated display saying loading instead of progress which is unknown.

Ok, so that’s not possible  
I finally used the loadImage callback and a throbber.  
It’s not ideal but it works 🙂

**But is it still possible to have a callback [whileLoading] of the image,**  
**in pure javascript within P5 or at the root?**

I have another question now 😀

When my slideshow looped,  
it unnecessarily reloads each image with loadImage.

**Is it possible to know if the image is in the browser cache,**  
**to avoid having to run the loading function?**

Or I have to load each image into an object,  
and then check if this object exists?

bulbx

---

<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:** [July 11, 2024, 10:33am UTC](https://discourse.processing.org/t/loading-bar-for-loading-image/44636/10 "2024-07-11T10:33:13Z")

</div>

> **[HTMLImageElement: Image() constructor - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image)**
>
> The Image()
> constructor creates a new HTMLImageElement instance. It is functionally
> equivalent to document.createElement('img').

> **[ProgressEvent - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/ProgressEvent)**
>
> The ProgressEvent interface represents events measuring progress of an underlying process, like an HTTP request (for an XMLHttpRequest, or the loading of the underlying resource of an , , ,

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [July 11, 2024, 11:12am UTC](https://discourse.processing.org/t/loading-bar-for-loading-image/44636/11 "2024-07-11T11:12:08Z")

</div>

> [@bulbx](#):
>
> > [@glv](#):
> >
> > You will not know size until after loading.  
> > You may consider just an animated display saying loading instead of progress which is unknown.
> 
> Ok, so that’s not possible

Turns out it is possible! See @GoToLoop post.

> [@bulbx](#):
>
> There is no function in p5 to get the quantity of bytes loaded or the size of the image.

p5.js is part a larger ecosystem and lots to learn!

I did look up throbber:

> **[Throbber](https://en.wikipedia.org/wiki/Throbber)**
>
> A throbber, also known as a loading icon, is an animated graphical control element used to show that a computer program is performing an action in the background (such as downloading content, conducting intensive calculations or communicating with an external device). In contrast to a progress bar, a throbber does not indicate how much of the action has been completed.
> Usually the throbber is found at the side of a program's toolbar or menu bar. Throbbers take various forms, but are commonly inc...

`:)`

---

<div class="post-metadata">

**Author:** ![bulbx](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bulbx/32/19702_2.png) [@bulbx](https://discourse.processing.org/u/bulbx)\
**Post date:** [July 16, 2024, 12:28am UTC](https://discourse.processing.org/t/loading-bar-for-loading-image/44636/12 "2024-07-16T00:28:41Z")

</div>

Hi,  
thank you for your feedback.

I finally created an object where I store the image,  
and a boolean to know if the image is loaded or not.

I just have one problem,  
**Is it possible to pass an argument into the loadImage() callback function?**  
To be able to assign the boolean to the correct object by passing an id.  
(there can be several loadImages happening at the same time…)

Because this doesn’t seem to work, I get an error message.  
_“loadImage() was expecting function(p5.Image) for the second parameter,  
received an empty variable instead.”_

(the variable is not empty…)  
and it launches the function directly without waiting for the loading to finish.

```auto
let imagesN = [];

function ImageN() {
  this.image_file;
  this.loaded = false;
}

```

```auto
function nextImageLoading() {
  imagesN[next_id] = new ImageN();
  imagesN[next_id].image_file = loadImage("images/" + data.c1[next_id[0]], nextImageLoaded(next_id));
}  

function nextImageLoaded(_next_id) {
  imagesN[_next_id].loaded = true;
}  

```

or maybe there is another way to do it,  
but it seemed good to me.  
bulbx

---

<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:** [July 16, 2024, 3:53am UTC](https://discourse.processing.org/t/loading-bar-for-loading-image/44636/13 "2024-07-16T03:53:12Z")

</div>

You can use a counter to represent how many images are currently being loaded:

```auto
var counter = 0

function nextImageLoading() {
  ++counter;
  imagesN[next_id] = new ImageN;
  imagesN[next_id].image_file = loadImage("images/" + data.c1[next_id[0]], decreaseCounter);
}

function decreaseCounter() { --counter; }  

```

Also, loaded images have both width & height greater than 1.

---

<div class="post-metadata">

**Author:** ![bulbx](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bulbx/32/19702_2.png) [@bulbx](https://discourse.processing.org/u/bulbx)\
**Post date:** [July 16, 2024, 3:45pm UTC](https://discourse.processing.org/t/loading-bar-for-loading-image/44636/14 "2024-07-16T15:45:01Z")

</div>

Thanks GoToLoop

(I almost went crazy yesterday, after changing everything,  
only to finally realize that it didn’t work because of the argument)

After a good night’s sleep,

I realized that I could put the loadImage function in the imageN object.  
That way I’m sure I have something clean with a id.

---

<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:** [July 16, 2024, 3:50pm UTC](https://discourse.processing.org/t/loading-bar-for-loading-image/44636/15 "2024-07-16T15:50:52Z")

</div>

You can have a function that checks if an image is fully loaded like this:  
`const isImgReady = img => img.width > 1; `