Why is the following image.onload throwing: "Maximum Call Stack Size Exceeded"?

Question

The following code update some data, refetches it, and then waits for an image field to load:

api.updateBuildings(payload).then(result => {
  this.fetchBuildings(() => {
    const image = new Image()
    image.src = result.data.web
    this.setIsLoading(false)
    image.onload = () => {
      console.log('LOADED:', image.onload())
    }
  })
})

However, image.onload throws Maximum Call Stack Size Exceeded.

Why is this?

EDIT:

result.data looks like this:

{ app: "http://ac-0uhksb6K.clouddn.com/370b989e0ceec6329fb6.jpg? imageView/2/w/4096/h/2048/q/100/format/png" categoryType : "livingroom" web: "http://ac-0uhksb6K.clouddn.com/370b989e0ceec6329fb6.jpg?imageView/2/w/4096/h/2048/q/100/format/png" }

Why are you recursively invoking `image.onload()`? that too without any break condition — Satpal, Aug 03 '16 at 06:21
@Satpal, Oh, I was just logging it to check what the function returned. — alexchenco, Aug 03 '16 at 06:22

score 2 · Accepted Answer · edited May 23 '17 at 12:00

2

Reason is simple. You are recursively invoking image.onload() without any break condition. As a result method is continuously invoked until you hit the call stack limit.

Problem statement is

console.log('LOADED:', image.onload()); //<==========

A good read Maximum call stack size exceeded error

edited May 23 '17 at 12:00

Community

1
1

answered Aug 03 '16 at 06:22

Satpal

132,252
13
159
168

score 2 · Answer 2 · edited Aug 03 '16 at 06:31

2

Because you call image.onload() in your console.log function, thus creating a recursion. You might want to change your log to something like this:

 image.onload = () => {
      console.log('LOADED:', image.src);
 }

edited Aug 03 '16 at 06:31

Mi-Creativity

9,554
10
38
47

answered Aug 03 '16 at 06:24

Michi Eisele

33
1
6

Why is the following image.onload throwing: "Maximum Call Stack Size Exceeded"?

2 Answers2