4 ms·

Does lazy loading at least carve out a placeholder spot for the image so that it doesn't throw off the layout? Because if not, please use something that does.

Does lazy loading at least carve out a placeholder spot for the image so that it doesn't throw off the layout? Because if not, please use something that does. There's nothing more frustrating than when I'm trying to read through a page and my spot keeps getting pushed up and up because of dynamically loading elements.

poniko 6y ago
Oh yes it does, you need to specify width and height for it to work properly.
dynm 6y ago
I believe that with current browsers the layout will change unless the width/height are specified in HTML. That being said, lazy loading does at least some of the time work "invisibly" with images getting loaded before they would become visible. It's up to the browser to decide how aggressive it wants to be about this.
austincheney 6y ago
If you know the size of the incoming image specify its dimensions with CSS.
tshaddox 6y ago
As other replies have mentioned, you need to set the width and height attributes on the img element. I believe that now works for responsive images in recent versions of popular browsers. It used to not work for responsive images. We had to do tricks like pseudo elements with padding set to a percent value: https://css-tricks.com/preventing-content-reflow-from-lazy-loaded-images/ https://css-tricks.com/preventing-content-reflow-from-lazy-l...
- jaeh 6y ago
  its a bit flaky, sometimes it just does not work, and its hard to debug, css is a hard language to debug and get right. https://jaeh.at https://jaeh.at works fine when reloading, no layout changes, and the layout changed slightly before i fixed it using width & height. https://noncon.org https://noncon.org does not (and i had no time to fix, might be because width of images is not set, might be something with the css position/float layout, we had about a week to setup the whole conference infrastructure, including the streaming server, layout flashing was my last concern at the time and i kept myself too busy since then to fix something so trivial...) sorry for the personal links, just examples i knew from the top of my head because i built them ;)
jontro 6y ago
Currently loading="lazy" is not supported by safari https://caniuse.com/loading-lazy-attr https://caniuse.com/loading-lazy-attr

poniko 6y ago

Oh yes it does, you need to specify width and height for it to work properly.

dynm 6y ago

I believe that with current browsers the layout will change unless the width/height are specified in HTML. That being said, lazy loading does at least some of the time work "invisibly" with images getting loaded before they would become visible. It's up to the browser to decide how aggressive it wants to be about this.

austincheney 6y ago

If you know the size of the incoming image specify its dimensions with CSS.

tshaddox 6y ago

As other replies have mentioned, you need to set the width and height attributes on the img element. I believe that now works for responsive images in recent versions of popular browsers. It used to not work for responsive images. We had to do tricks like pseudo elements with padding set to a percent value: https://css-tricks.com/preventing-content-reflow-from-lazy-loaded-images/ https://css-tricks.com/preventing-content-reflow-from-lazy-l...

jaeh 6y ago
its a bit flaky, sometimes it just does not work, and its hard to debug, css is a hard language to debug and get right. https://jaeh.at https://jaeh.at works fine when reloading, no layout changes, and the layout changed slightly before i fixed it using width & height. https://noncon.org https://noncon.org does not (and i had no time to fix, might be because width of images is not set, might be something with the css position/float layout, we had about a week to setup the whole conference infrastructure, including the streaming server, layout flashing was my last concern at the time and i kept myself too busy since then to fix something so trivial...) sorry for the personal links, just examples i knew from the top of my head because i built them ;)

jontro 6y ago

Currently loading="lazy" is not supported by safari https://caniuse.com/loading-lazy-attr https://caniuse.com/loading-lazy-attr