This PR adds https://github.com/image-size/image-size to let messonry determine an arbitrary image's width & height WITHOUT having to download the entire image! It should (hopefully :crossed_fingers:) allow messonry to become fully Server-Side Render(-ed/-able?)!
So previously we were hiding unknown/arbitrary images (via CSS) until the HTML Image Element's onLoad event to grab the image's dimensions, and once that was known - show the element. This was admittedly a pretty poor implementation performance-wise, because:
1) it is 100% client-side dependent
2) if the client ever downloads an image quicker than the page itself, this event will actually not fire at all, and the image will remain hidden. Read more: https://stackoverflow.com/questions/39777833/image-onload-event-in-isomorphic-universal-react-register-event-after-image-is (and thank you to @Joonpark13 for making me aware of this in https://github.com/vercel/next.js/pull/24153)
3) the client has to wait until the end of downloading the entire image to get what is essentially metadata! And is actually the first few bits of data that is downloaded!
For the past year or so I have been working on this 'messonry' idea (in one form or another) I have continually been asking myself, "Why can't <img> have the same onLoadedMetadata event that <video> has?!?! $%*&!!!"
It's actually very common to see some videos loading in the grid before images due to this restrictive race condition.
Well now that we can essentially do the same, and on the server side no less, we will finally be able to get & pass the size props of unknown images so that they are ready by the time it gets to the user. Is this the end of Cumulative Layout Shift (CLS) for messonry??? It just might be :smile:
-related to #2, #6
Co-authored-by: Federico Brigante me@fregante.com https://github.com/image-size/image-size/issues/258#issuecomment-792493746
Info
This PR adds https://github.com/image-size/image-size to let messonry determine an arbitrary image's width & height WITHOUT having to download the entire image! It should (hopefully :crossed_fingers:) allow messonry to become fully Server-Side Render(-ed/-able?)!
So previously we were hiding unknown/arbitrary images (via CSS) until the HTML Image Element's
onLoadevent to grab the image's dimensions, and once that was known - show the element. This was admittedly a pretty poor implementation performance-wise, because: 1) it is 100% client-side dependent 2) if the client ever downloads an image quicker than the page itself, this event will actually not fire at all, and the image will remain hidden. Read more: https://stackoverflow.com/questions/39777833/image-onload-event-in-isomorphic-universal-react-register-event-after-image-is (and thank you to @Joonpark13 for making me aware of this in https://github.com/vercel/next.js/pull/24153) 3) the client has to wait until the end of downloading the entire image to get what is essentially metadata! And is actually the first few bits of data that is downloaded!For the past year or so I have been working on this 'messonry' idea (in one form or another) I have continually been asking myself, "Why can't
<img>have the sameonLoadedMetadataevent that<video>has?!?! $%*&!!!" It's actually very common to see some videos loading in the grid before images due to this restrictive race condition.Well now that we can essentially do the same, and on the server side no less, we will finally be able to get & pass the size props of unknown images so that they are ready by the time it gets to the user. Is this the end of Cumulative Layout Shift (CLS) for messonry??? It just might be :smile:
next up: