class to show loaded state

[sjwilliams]

class to show loaded state

[sjwilliams]

added in v0.5.0

[zachwise]

It seems that this works, sort of. It adds the class but it does so before the browser has fully loaded the image. It seems that the class is added when the source is switched, not when it's actually loaded.

[sjwilliams]

@zachwise, yes, you're correct. it doesn't actually wait until the image has loaded. My need was tracking whether the element had triggered the scroll-based callback, not whether or not the function of the callback -- which is an image load by default but could be lots of other things -- had actually completed.

I could see how 1) the language/feature is confusing and 2) folks would want what you're talking about, not what I actually implemented.

I'm certainly open to the idea of changing state somehow on an event, like image load. If we add it, I'd want to make sure the solution is still generic, so things like iframes, videos and custom callbacks with no src setting behave predictably.

What were you trying to do? What would you want in an ideal solution?

[zachwise]

I was hoping to smooth out the loading of images as they come into view by fading them in. Right now I was using the ll-loaded class to change the opacity but it gets applied before the image actually loads. which means the image pops into view instead of fading. Here's an example of what I'm working on: http://picturestory.knightlab.com/stories/jackie.html

[zachwise]

It looks like I could just use jquery's load method to find out when something loads, so it's up to you if you think it's needed for this library or not.

[sjwilliams]

@zachwise fwiw, today I needed the same functionality you do, so I've started the feature-onload branch to experiment.

[sjwilliams]

I've changed this in v0.5.1 so images fire their callback and update class names onload, and video and audio elements do it onloadstart. Every other situation continues to do it immediately when the viewport position triggers the callback.