Open darlanmendonca opened 7 years ago
I think it'd be really cool to have this feature, but I think this should be a property, you know, nothing obligatory because sometimes we don't need previews.
The other option maybe is to add a fade in effect when loaded as the default behavior, this way it'd be possible to have a smoother animation.
But I have no idea on how to do either of them :cold_sweat:
I agree with "sometimes we don't need previews", but I think this just to circular loading
today, while image loading, the render is up to down, like gif below
and the problem is, we have a shadow below of image, is very ugly
my idea is make a progressive loading
so shadow dont be displayed without image front, and with a blur, have a good aspect
exactly like medium https://jmperezperez.com/assets/images/posts/medium-progressive-loading.mp4
I have a little idea about progressive loading, If I dont mistake, has an attribute html to make this, or I'm crazy, rs, but I believe have see it a long time ago.
and of course, we have a class javascript where we can listen for the load event, etc
you guess stranger add the progressive loading / blurred by default, without attribute?
Yes a bit, because sometimes blurred loading just don't fit with the site design, it fits well in medium and other stuff like instagram, but imagine a newspaper website like Reuters. I don't think it would be visually pretty.
However we can do like a progressive
attribute, to set if this behavior will take place, otherwise we can display a preloader (can be a custom preloader chosen by the user) and when the loading is done instead of just showing the image we have can add a fade in effect
Fade in is aways pretty
humm, I understood. Set a progressive
attribute looks be a better approach.
as design, I'm thinking much about that, and I wish/believe in that actually
the blur, can be part of component, once time that is part of minimalist design of that component, but if user, or us, do themes for that, we can disable blur (is just a css 3 filter)
the magic really is add an option to progressive load, from an attribute used, I like too, and visual is just css, by having a default, and can be overwited
you agree?
as to fade, I think it's worth a test yes, it's the kind of thing that only feeling, experiencing can reach a opnion which of the two is better, or we support both
I'm looking for progressive, and try understand this article https://blog.codinghorror.com/progressive-image-rendering/
There's nothing much about minimalist design in this component because it is just an image tag, it'll show the user the image he/she described. I believe the usability for the programmer should be the best case in this project
yep, the usability for programmer is a primary specification of each component, but, the design is important too, is a premise for this project, have a minimalis design, where there can be overwrited in a theme, or just in sass
Yes, but how we will implement a design onto an image? Components like inputs and such have ways of implementing the design and changing the appearance but images are just images, unless we put a border or something
the design at moment is
mn-image
a:hover mn-image // only in desktop
and finally, the loading mn-image.loading
a preview of all
Pretty cool man! Just on theloading bit, I think it shouldn't be circular preloader, but a bar instead, just a simple loading bar in the middle
loading bar have a problem, they generate insatisfaction, because that give a precise feedback (10%, 25%, 90%, "travou")
now circular bar, is for ansious people, imagine a circular bar with animation a little fast, this generate a psicological satisfaction, the people fell more fast
Hum, yeah didn't think about it, maybe you're kinda right. So we can just put something linear to match the style like an endless preloader or an animation like these:
http://preloaders.net/en/horizontal (example only) or http://cssload.net/en/horizontal-bars
Just to give a clean look
@khaosdoctor, I'm thinking to add a progressive loader to mn-image, so, while image load, we can display the image blurred like medium/instragram