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

What is Framer? Join the Community
Return to index
Jiwoong Lee
Posted Jul 26 - Read on Facebook

In a recent project at work, been handling with many hi-fi images in one prototype, so I needed include image pre-loading step or disabling interaction until all images are ready for user to be able to use prototype flawlessly.
I think there're already many existing modules out there, but there might be something new in my module, so sharing it out anyway :)

There're three usecases.

#1. Have array of image urls, load everything and draw prototype.
http://share.framerjs.com/ojxo4rg9ps5o/

#2. Have array of image urls, draw prototype first and check progress.
http://share.framerjs.com/qqgozodflrp5/

#3. No pre-defined list of images, draw prototype anyway and pull out image links and check progress.
http://share.framerjs.com/xbdkmxxpe794/

Compare them.
http://codepen.io/jimoong/full/xVereB/

Hope this being useful for some folks in this group.

8 Comments

John Lee

YES VERY USEFUL! I often find a lot of latency around loading images, either Sketch imports, or just pulling in stuff. Keep up the GREAT work!

Koen Bok

This is fantastic. I was about to work on adding something like this to core, but now I just might steal this :-)

Koen Bok

Just some background on why this is a smart idea. Apart from the fact that it's better to see a full prototype with everything loaded, the downloading and decompressing of images actually slows down your prototype interaction a lot, so you'll see dropped frames and non-responsiveness until everything is loaded. This isn't great if you share a project with someone, especially if she/he has a slower connection. A preloaded avoids all this.

Koen Bok

One improvement suggestion would be to use XMLHttpRequest with onprogess to actually get the progress in bytes, rather then the number of images.

http://stackoverflow.com/a/23703257

Jiwoong Lee

Right. And one thing that I realized when I was on this, browser in Studio seems not like caching images which totally make sense, so there might be some gab between dev mode and presentation mode. Maybe this thing only works on web client, or there could be some option to modify cache expiration in Studio. I don't know.

Clement Ng

That's amazing! Thanks for sharing.

Joon Won Lee

It is awesome!

Jordan Robert Dobson

#framerCode

Read the entire post on Facebook