Animate image load

[designbyadrian]

Hello, is it possible to have images fade in when loaded? I'd be happy with just a CSS-class being added when image is finished loading, or just an event firing when done.

[mbrevda]

All props are passed through to the underlying <img>, so you have pretty much full control over the rendering of the final <img> element. Perhaps this needs to be clarified in the docs.

[designbyadrian]

Hello, thank you for replying. I'm not receiving any events from Img, so I don't know when the image is done loading, thus can't pass anything through?

[mbrevda]

Any props passed to <Img> which aren't used by image itself will be padded to the underlying <img>. So if you do

<Img src="foo" onLoad={() => console.log('Image loaded!')}>

it should log when the image was loaded

[designbyadrian]

Oh, I didn't get you could hijack those props! Thanks!

[mbrevda]

Let me know if that works!

…

On Wed, Jun 28, 2017 at 1:37 PM Adrian von Gegerfelt < ***@***.***> wrote: Oh, I didn't get you could hijack those props! Thanks! — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub <#143 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAR4jAASqzMRN5fYee9JIKseASddVHiXks5sIizbgaJpZM4OGy8B> .

[AntonioRedondo]

This is not possible with the current implementation. Even when the prop onLoad can be passed down to the <img> element the prop loader is removed/not rendered if the image is loaded. That is to say, only one of the two can be rendered at the same time. This prevents creating transitions between loader and image.

[mbrevda]

This prevents creating transitions between loader and image.

What would be needed in order to animate between the loader and the final image?

…

On Wed, Jan 31, 2018, 9:42 PM Antonio Redondo ***@***.***> wrote: This is not possible with the current implementation <https://github.com/mbrevda/react-image/blob/master/src/index.js#L145>. Even when the prop onLoad can be passed down to the <img> element the prop loader is removed/not rendered if the image is loaded. That is to say, only one of the two can be rendered at the same time. This prevents creating transitions between loader and image. — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub <#143 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAR4jEwj7Kqv0im4-vm-H7Tzxw0Foiccks5tQMHEgaJpZM4OGy8B> .

[AntonioRedondo]

Both the loader and the <img> would need to be rendered, and with CSS or inline-styling they would be positioned absolute, and one of them would face to opacity: 0 (or any other property transition). Something like this. However the code to implement this shouldn't be as complex as the one of the link.

[AntonioRedondo]

Since the onLoad event can be passed to the <img> element the end-user developer could wrap your component into a sandwich of <div>s and change the opacity when onLoad is executed. However this defeats the purpose of having a 3rd-party component. With the current implementation the difference we get is that now the image will load at once rather than progressively in vertical. But no chance of applying transitions. It would be nice if this functionality was implemented on the component.

[mbrevda]

I wonder if accepting a function that can be rendered instead of I'm would allow for more flexibility here?

…

On Wed, Jan 31, 2018, 10:33 PM Antonio Redondo ***@***.***> wrote: Since the onLoad event can be passed to the <img> element the end-user developer could wrap your component into a sandwich of <div>s and change the opacity when onLoad is executed. However this defeats the purpose of having a 3rd-party component. With the current implementation the difference we get is that now the image will load at once rather than progressively in vertical. But no chance of applying transitions. It would be nice if this functionality was implemented on the component. — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub <#143 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAR4jIGlOey22fOfHwiR9wEk1ZoNG87gks5tQM43gaJpZM4OGy8B> .

[AntonioRedondo]

Yeah, that sounds well, as long as this function is called with the state of the image and it's allowed being rendered after the image is loaded.

[AntonioRedondo]

Another easy way to implement transitions would be using ::before or ::after pseudo-elements which would fade away after onLoad is called. This actually wouldn't require code changes. I'll try to experiment with this tomorrow.

[mbrevda]

This should be a pretty simple change. Would you send a PR?

…

On Wed, Jan 31, 2018, 11:14 PM Antonio Redondo ***@***.***> wrote: Another easy way to implement transitions would be using ::before or ::after pseudo-elements which would fade away after onLoad is called. This actually wouldn't require code changes. I'll try to experiment with this tomorrow. — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub <#143 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAR4jNLQtwbjmxYHUGRTN7vfTg6Q5FdKks5tQNe9gaJpZM4OGy8B> .

[AntonioRedondo]

Yep, no prob. Let's see tomorrow whether I get it working and hopefully I could have something to commit.

[mbrevda]

Great, thanks. Let me know if you need help.

…

On Wed, Jan 31, 2018, 11:20 PM Antonio Redondo ***@***.***> wrote: Yep, no prob. Let's see tomorrow whether I get it working and hopefully I could have something to commit. — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub <#143 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAR4jPX7VWVPQDGFYWrN6M5r2rmslOyDks5tQNjFgaJpZM4OGy8B> .

[mbrevda]

Were you able to make any progress with this? I was experimenting and this is what I came up with:

[AntonioRedondo]

Hi @mbrevda. Sorry for not coming back to this. Busy times. I came across with a similar visual solution to yours using the onLoad attribute. But I did it at work without time to move results to an isolated component and project.

Your solution looks great! When I was working on my implementation I came across with a small issue. After first time the image loads this is cached. So that means that on successive times the animation transition will be shown at moment 0. It would be ideal if there is some way to check whether the image is on the cache, and on this case avoiding the transition since the image will load straight away. Not a big issue anyway.

Another challenge is the initial dimensions of the pictures, which are unknown. I see you're giving some defaults.

I feel curious about how are you implementing this. If you want, once you have a pull request I can review it and see how you have done it.

[mbrevda]

I don't believe it is possible to check if a file is in the cache. You can see my current implementation (and planned changes) in 23c2884.

Another challenge is the initial dimensions of the pictures, which are unknown. I see you're giving some defaults.

Where are you talking about?

[AntonioRedondo]

I just had a look to the changes. It's a good idea to use this react-css-transition-replace with automatic height animation.

There is small issue with the current changes. The preloader height doesn't adjust to the image height once this is loaded during the transition. Check the below gif (I set the preloader background in red and slowed down the transition for a better visualisation):

I've created a pull request which addresses this. After the changes the transitions is like below:

Are you wrapping and offering TransitionDemo component as an importable component or just leaving it as a recipe? I think the first would be an easier way of using your package as it would be ready to use. You'd just have to include new props for transitionName, transitionEnterTimeout and transitionLeaveTimeout.

[mbrevda]

Thanks! The goal of this project isn't to provide a transition framework or specialized transition components. It would seem that the adding a wrapper function gives the user enough flexibility to implement transitions and other advanced rendering options whilst still keeping this component clean and simple.