3 ms·

"Setting the size of elements before they load" I host a personal photo gallery online and I've been dreading implementing this for images to get rid of the ju

by aimor 5y ago

"Setting the size of elements before they load" I host a personal photo gallery online and I've been dreading implementing this for images to get rid of the jump when lazy loading. I'm not even sure there's a good way to do it.

bigyikes 5y ago
For my personal image gallery, I have a script to include the image dimensions in the file name when I upload. It’s kind of a hack, but it lets me compute the final image flow based on the file name before any of the images have loaded.
mikeiz404 5y ago
Do your photos scale in your gallery? This is off the top of my head but if your images are set to a percent based width so they scale (mine are) and you know the aspect ratio of the image then you can set the CSS ‘ aspect-ratio’ property (or there are some other hacks with padding on a wrapper div) to maintain the height. You’d probably want to integrate this into the build process but I have not done this.
- tshaddox 5y ago
  You don't even need the recently-added aspect-ratio property. In most up-to-date browsers you can now just add the height and width attributes to the img tag and the aspect ratio will render correctly even for responsive images: https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/ https://www.smashingmagazine.com/2020/03/setting-height-widt...
mceachen 5y ago
The only way to prevent reflow is to give the browser your image dimensions or aspect ratio: https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-rati... Using a css flexbox or grid layout means you don't have to recalculate image div widths and heights when the browser viewport width changes, but you still need to give it enough information to back into the correct aspect ratio. Also, using a srcset helps only load the necessary bytes, but means you'll need to either build the resized image on the fly (which is cpu-expensive) or prebuild them (which takes up some disk space). In the interests of a performant UI, PhotoStructure extracts and remembers width and height of photos and videos during imports, but if you're only loading a couple images in a gallery, your could fetch this metadata on the fly as well.
ratww 5y ago
For a grid-style gallery you can have a container for each image with a fixed size (the maximum size you want an image to be) and the image itself can use max-width and max-height with the same size of the container. If your aspect ratios are too varied, you might have to fiddle with the ideal size to get an optimal result, but it gets the job done. If it's another kind of gallery it could work if you accept those constraints. If you don't, then it's better to use width/height anyway.
unclebucknasty 5y ago
Depending on your UI, you can also load the images into a hidden div (display:none), catch the load event for each image, and display the div once you've detected that the entire image set has loaded. I want to say I did something like this for an infinite scroll, grid layout some time ago where I didn't have the image dimensions to help the browser. Details are fuzzy but there seemed to be a gotcha here and there, some of which was around the load event. Of course, the user's perceived wait time goes up a bit, as you're not displaying each image as it loads. But, that can be mitigated somewhat by fewer images per pagination and/or preloads. The overall solution worked well for our use case.
paulirish 5y ago
There might be something in here for you: https://twitter.com/samccone/status/1279117536479506432?s=20 https://twitter.com/samccone/status/1279117536479506432?s=20 https://twitter.com/samccone/status/1360730258752741376?s=20 https://twitter.com/samccone/status/1360730258752741376?s=20 This stuff is hard

by aimor 5y ago

bigyikes 5y ago

For my personal image gallery, I have a script to include the image dimensions in the file name when I upload. It’s kind of a hack, but it lets me compute the final image flow based on the file name before any of the images have loaded.

mikeiz404 5y ago

Do your photos scale in your gallery? This is off the top of my head but if your images are set to a percent based width so they scale (mine are) and you know the aspect ratio of the image then you can set the CSS ‘ aspect-ratio’ property (or there are some other hacks with padding on a wrapper div) to maintain the height. You’d probably want to integrate this into the build process but I have not done this.

tshaddox 5y ago
You don't even need the recently-added aspect-ratio property. In most up-to-date browsers you can now just add the height and width attributes to the img tag and the aspect ratio will render correctly even for responsive images: https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/ https://www.smashingmagazine.com/2020/03/setting-height-widt...

mceachen 5y ago

The only way to prevent reflow is to give the browser your image dimensions or aspect ratio: https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-rati... Using a css flexbox or grid layout means you don't have to recalculate image div widths and heights when the browser viewport width changes, but you still need to give it enough information to back into the correct aspect ratio. Also, using a srcset helps only load the necessary bytes, but means you'll need to either build the resized image on the fly (which is cpu-expensive) or prebuild them (which takes up some disk space). In the interests of a performant UI, PhotoStructure extracts and remembers width and height of photos and videos during imports, but if you're only loading a couple images in a gallery, your could fetch this metadata on the fly as well.

ratww 5y ago

For a grid-style gallery you can have a container for each image with a fixed size (the maximum size you want an image to be) and the image itself can use max-width and max-height with the same size of the container. If your aspect ratios are too varied, you might have to fiddle with the ideal size to get an optimal result, but it gets the job done. If it's another kind of gallery it could work if you accept those constraints. If you don't, then it's better to use width/height anyway.

unclebucknasty 5y ago

Depending on your UI, you can also load the images into a hidden div (display:none), catch the load event for each image, and display the div once you've detected that the entire image set has loaded. I want to say I did something like this for an infinite scroll, grid layout some time ago where I didn't have the image dimensions to help the browser. Details are fuzzy but there seemed to be a gotcha here and there, some of which was around the load event. Of course, the user's perceived wait time goes up a bit, as you're not displaying each image as it loads. But, that can be mitigated somewhat by fewer images per pagination and/or preloads. The overall solution worked well for our use case.

paulirish 5y ago

There might be something in here for you: https://twitter.com/samccone/status/1279117536479506432?s=20 https://twitter.com/samccone/status/1279117536479506432?s=20 https://twitter.com/samccone/status/1360730258752741376?s=20 https://twitter.com/samccone/status/1360730258752741376?s=20 This stuff is hard