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

What is Framer? Join the Community
Return to index
Patrick McLean
Posted Jun 05 - Read on Facebook

yo! I was just curious to see if any of you radical Framer folks have worked with any JS image pre-loaders? I've tried a few solutions I've tracked down through the-googles but nothing seems to work.

I've been trying to resolve some image flickering I'm seeing when doing an image swap and was thinking a pre-loader would help. I should point out I'm running the prototype off a server (not locally).

Any ideas? Thanks in advance!

9 Comments

George Kedenburg III

If you know the image ahead of time, maybe you could temporarily load it in to a view offscreen. This should make the browser cache it, so when you do your onscreen swap it would be instant. (I think)

Patrick McLean

That's actually not a bad idea. Thanks George. I'm still curious though to see if anyone has a pre-loader solution...

Johannes Eckert

I also have issues with images seem to be loaded when the view appears for the first time, causing lauding waits and spring animations to go crazy. Any way to wait for all images to load before running the prototype, Koen Bok?

Koen Bok

Yeah, the images have a "load" event so you could do something like this: https://gist.github.com/koenbok/f9392438027828b4130f

Johannes Eckert

This is great! I wonder if there could be a similar event for the framer importer, so we can halt code execution until all views from sketch are created and loaded?

Johannes Eckert

hm, load doesn't seem to fire. I was looking at the source in framer and tried to do the preloading with image() on my own, but we still had problems with images appearing later when the view appeared

Koen Bok

hmmm let me try and make an example

Koen Bok

Ah. Because of an optimization, it only throws the load event if the listener was added before the image was set. I'll have to change this.

Patrick McLean

Sweet!

Read the entire post on Facebook