# How do I load images from and array of URLs?

**URL:** <https://discourse.processing.org/t/how-do-i-load-images-from-and-array-of-urls/11435>\
**Category:** Coding Questions\
**Created:** [May 20, 2019, 6:28pm UTC](https://discourse.processing.org/t/how-do-i-load-images-from-and-array-of-urls/11435 "2019-05-20T18:28:02Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Artie\_veirkant\_sux](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/artie_veirkant_sux/32/5283_2.png) [@Artie\_veirkant\_sux](https://discourse.processing.org/u/Artie_veirkant_sux)\
**Post date:** [May 20, 2019, 6:28pm UTC](https://discourse.processing.org/t/how-do-i-load-images-from-and-array-of-urls/11435/1 "2019-05-20T18:28:03Z")

</div>

Hey all,  
Snatching URLs from RSS, I’ve been able to populate an array of links; ran into some issues loading the images. Trying to use that array outside of its class has been problematic, and I don’t know where to place my loadImage().

**Here’s the offending code:**

```auto
thingTemp.prototype.update = function() {
  this.lifespan -= 2;
  for (let k = 0; k < this.link.length; k++) {
    this.link.push(photos[k].getChild('media:content').getString('url')); //populates an array with image urls
  }
};

thingTemp.prototype.display = function() {
  tint(255, this.lifespan); //changes opacity
  img = loadImage(this.link[0], success, fail);
  image(img, this.x, this.y);
};

```

---

<div class="post-metadata">

**Author:** ![Artie\_veirkant\_sux](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/artie_veirkant_sux/32/5283_2.png) [@Artie\_veirkant\_sux](https://discourse.processing.org/u/Artie_veirkant_sux)\
**Post date:** [May 20, 2019, 6:30pm UTC](https://discourse.processing.org/t/how-do-i-load-images-from-and-array-of-urls/11435/2 "2019-05-20T18:30:03Z")

</div>

Additionally, I was wondering if the class.prorotype syntax was out-of-date.

---

<div class="post-metadata">

**Author:** ![Artie\_veirkant\_sux](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/artie_veirkant_sux/32/5283_2.png) [@Artie\_veirkant\_sux](https://discourse.processing.org/u/Artie_veirkant_sux)\
**Post date:** [May 20, 2019, 7:36pm UTC](https://discourse.processing.org/t/how-do-i-load-images-from-and-array-of-urls/11435/3 "2019-05-20T19:36:34Z")

</div>

Presumably, I would load my image in preload(), But thingTemp.links isn’t defined at start.

Maybe I’d refactor my code by defining links[] at preload therefore removing it from thingTemp class? Would that mean it wouldn’t be dynamic (i.e. images will remain the same till reload)?

---

<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:** [May 21, 2019, 3:33am UTC](https://discourse.processing.org/t/how-do-i-load-images-from-and-array-of-urls/11435/4 "2019-05-21T03:33:10Z")

</div>

> [@Artie\_veirkant\_sux](#):
>
> I was wondering if the `class.prototype` syntax was out-of-date.

Well, I’d say not out-of-date, but rather out-of-fashion. 😆  
After all, JS got the `class` keyword for a couple of years now: 😜

> **[class - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/class)**
>
> The class declaration creates a binding of a new class to a given name.

---

<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:** [May 21, 2019, 3:45am UTC](https://discourse.processing.org/t/how-do-i-load-images-from-and-array-of-urls/11435/5 "2019-05-21T03:45:48Z")

</div>

> [@Artie\_veirkant\_sux](#):
>
> Presumably, I would load my image in **preload()**,

- You can chain-load everything from within **preload()**.
- 1st load the RSS, and pass a callback that will grab all of its URLs.
- Still inside that callback, call **loadImage()** for each grabbed URL.
- All the above happens before **setup()**!
- The online sketch below uses **loadTable()** to get URLs that will later be passed to **loadImage()** calls within callback **createPlayers()**:

1. [ThimbleProjects.org/gotoloop/96556](http://ThimbleProjects.org/gotoloop/96556)
2. [ThimbleProjects.org/gotoloop/96556/sketch.js](http://ThimbleProjects.org/gotoloop/96556/sketch.js)
3. [ThimbleProjects.org/gotoloop/96556/players.csv](http://ThimbleProjects.org/gotoloop/96556/players.csv)

---

<div class="post-metadata">

**Author:** ![Artie\_veirkant\_sux](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/artie_veirkant_sux/32/5283_2.png) [@Artie\_veirkant\_sux](https://discourse.processing.org/u/Artie_veirkant_sux)\
**Post date:** [May 21, 2019, 5:59am UTC](https://discourse.processing.org/t/how-do-i-load-images-from-and-array-of-urls/11435/6 "2019-05-21T05:59:51Z")

</div>

\<3  
Thanks for the suggestion, I’ll check it out!

You’re a blessing,  
Artie\_sux