33 ms·

Screen relative units are not possible to be used here - you have no idea how big the image will be on the screen, since you don't know how big the screen is.

by onli 7y ago

Screen relative units are not possible to be used here - you have no idea how big the image will be on the screen, since you don't know how big the screen is. Using js onresize event is a no-go, if JS is still needed the spec is worthless. Lazy loading images with JS worked before just fine, this has to be about not needing special JS for this feature. No, parent is right: It's impossible to satisfy that recommendation, usually.

onion2k 7y ago
Screen relative units are not possible to be used here - you have no idea how big the image will be on the screen, since you don't know how big the screen is. Screen relative units represent a percentage of the screen size (technically speaking it's the viewport really). You don't need to know how big the screen is; you're tell the browser to use, for example, 25% of the viewport height when you set something to be 25vh. If you want 4 images vertically that's really useful. That way the browser knows it needs to put a box 25% of the screen height in the DOM where the image will be loaded later so there's no layout thrashing. Using js onresize event is a no-go, if JS is still needed the spec is worthless. The parent suggested they would want to change the width and height attributes of the image when the user resizes their browser. That's exactly what the resize event is for. If you want to display a fixed size image you can use fixed width and height attributes. If you want the image to scale with the viewport size you can either use units that represent a relative size or you need to use JS to modify the attributes. Heck, you can even use media queries to mix and match and have fixed size in some devices and relative in others. Lazy loading images with JS worked before just fine.. Except you needed JS to do it. With the new HTML spec you get the benefits of basic lazy loading without needing the additional weight of some JS code. That's good.
- onli 7y ago
  But you never know that an image should cover 25vh! That depends on the size of the viewport in total, the resolution and the specifics of the layout situation, things like text size. And almost always the width of the viewport decides image width and thus the height of the image. And that's before resizing anything.

by onli 7y ago

onion2k 7y ago

Screen relative units are not possible to be used here - you have no idea how big the image will be on the screen, since you don't know how big the screen is. Screen relative units represent a percentage of the screen size (technically speaking it's the viewport really). You don't need to know how big the screen is; you're tell the browser to use, for example, 25% of the viewport height when you set something to be 25vh. If you want 4 images vertically that's really useful. That way the browser knows it needs to put a box 25% of the screen height in the DOM where the image will be loaded later so there's no layout thrashing. Using js onresize event is a no-go, if JS is still needed the spec is worthless. The parent suggested they would want to change the width and height attributes of the image when the user resizes their browser. That's exactly what the resize event is for. If you want to display a fixed size image you can use fixed width and height attributes. If you want the image to scale with the viewport size you can either use units that represent a relative size or you need to use JS to modify the attributes. Heck, you can even use media queries to mix and match and have fixed size in some devices and relative in others. Lazy loading images with JS worked before just fine.. Except you needed JS to do it. With the new HTML spec you get the benefits of basic lazy loading without needing the additional weight of some JS code. That's good.

onli 7y ago
But you never know that an image should cover 25vh! That depends on the size of the viewport in total, the resolution and the specifics of the layout situation, things like text size. And almost always the width of the viewport decides image width and thus the height of the image. And that's before resizing anything.