progressive loading

[darlanmendonca]

@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

[khaosdoctor]

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:

[darlanmendonca]

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

[darlanmendonca]

you guess stranger add the progressive loading / blurred by default, without attribute?

[khaosdoctor]

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

[khaosdoctor]

Fade in is aways pretty

[darlanmendonca]

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

• each component can have a minimalist design
• release modules to set theme or document how overwrite and use a custom identity

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?

[darlanmendonca]

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

[darlanmendonca]

I'm looking for progressive, and try understand this article https://blog.codinghorror.com/progressive-image-rendering/

[khaosdoctor]

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

[darlanmendonca]

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

[khaosdoctor]

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

[darlanmendonca]

the design at moment is

mn-image

• border-radius
• two shadows to img, one very clean bottom, and one to simulate a border thin, useful to imgs with white color predominant

a:hover mn-image // only in desktop

• change scale, and 3d perspective
• change the size of drop shadow

and finally, the loading mn-image.loading

• img blurred
• a circular loading
• no drop-shadow

a preview of all

[khaosdoctor]

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

[darlanmendonca]

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

[khaosdoctor]

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