search

hongaar / unveil2

:mount_fuji: A very lightweight jQuery plugin to lazy load images
http://nabble.github.io/unveil2
38 stars 11 forks source link

Preserve original img size/space while loading #15

Closed BeatLaG closed 8 years ago

BeatLaG commented 8 years ago

Hi Joram!

I´m wondering how the best to prevent the 'jump' when loading images. I have set up width/height via img attributes for each element, but they still are jumping when unveil loads because the plugins removes the original picture.

Do you have any guideline in order to fix this issue?

Thanks!

hongaar commented 8 years ago

Is there a specific layout/browser/os where this happens? Changing the image source should not modify the page layout when width/height are set on the img element.

See http://jsfiddle.net/hongaar/bpzfgudm/3/

BeatLaG commented 8 years ago

Every image has set correctly the size attributes, I´m wondering if downscaling these images because the size parents could affect to this. I mean, the native size and the size in the markup is not the same, I though that the size to handle images was the one written in the markup.

What do you think?

Thanks a lot for your clarifications! :)

hongaar commented 8 years ago

I don't think this could be the issue, see the updated jsFiddle where the first image has different native/attribute size.

http://jsfiddle.net/hongaar/bpzfgudm/5/

BeatLaG commented 8 years ago

The it´s a bad implementation by my side, Joram. Thank you very much for your feedback. It is really appreciated 💯

hongaar commented 8 years ago

No worries!

BeatLaG commented 8 years ago

Hi Joram,

I truly sorry to bother you again with this. I have found the issue and I was wondering about what you think.

I´m using unveil with a lot of images that receive a img-responsive class from Bootstrap, this class adds a height: auto to preserve the responsiveness with a max-width: 100% value, the common way.

When I remove the height: auto unveils works perfectly, but with this property the layout building is very messy. Could you please recommend me how to implement both features in a better manner? Each image should be responsive and work well with lazy loading.

Thanks!

BeatLaG commented 8 years ago

I need to fix this asap, Joram. If you could give some air to this I really would appreciate it. I can´t find nothing out tricking bottom paddings and so on via js. Must be something easier to front this.

hongaar commented 8 years ago

If all images have the same aspect ratio, you could define a custom placeholder image, example: http://jsfiddle.net/hongaar/bpzfgudm/7/

I will do some tests later to see if we can mitigate this problem by somehow altering the placeholder image behaviour.