This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Emily Rautenberg
Posted Sep 20 - Read on Facebook

Hey everyone! I'm trying to load a bunch of images in a loop, and create layers using the image's original height and width. I'm encountering an issue where I have a synchronous loop but am calling onload inside, which is asynchronous. So, as the loop continues, the image.onload ends up only using the last element of the loop.

Simplified, this is pretty much my code:

__arr = ["Image1", "Image2", "Image3"]
__for i in [0...arr.length]
______img = new Image()
______img.onload = ->
__________tagLayer = new Layer
______________name: arr[i]
______________parent: arrayLayer
______________backgroundColor = null
______________opacity: 1
______________image: img.src
______________width: img.width
______________height: img.height
______img.src = "images/#{arr[i]}.png"

And basically, this is the issue:
https://stackoverflow.com/questions/38468210/javascript-image-onload-on-multiple-image-only-working-for-the-last-image

I'm having a hard time applying these fixes in CoffeeScript/Framer. Does anyone have any suggestions?

1 Comments

Emily Rautenberg

If anyone is interested, I figured it out, this page was super helpful:
http://procbits.com/2012/05/24/thinking-asynchronously-in-coffeescriptjavascript-loops-and-callbacks

Read the entire post on Facebook