Interesting approach with the "1x1px transparent image placeholder" Adrian, it gave me some idea 👍
If that would be interesting, in our eco system we also published a Web Component to lazy load images.
If will first try to use native lazy loading, if not supported by the browser, will fallback on the intersection observer technique and if not supported, will display the image instantly.
Also supports src-set, svg and it is possible to define an img to display in case of error (sh*t happens).
I had to check its source code to remember what I implemented (😅). Instead of a blank pixel I hide (opacity: 0) the image and when loaded toggle its opacity to render, kind of "smooth", transition.
Thanks again for the blog post, I might add a variable to set lazy (currently fix) or eager as you explained above.
Wow! Thank you very much. Glad you've found it useful. I haven't worked with Web components, I'll have to check them out at some point.
Regarding the 1x1 placeholder, you want an image to have a src set in any moment. I think that either the HTML validator throws an error or something breaks. Either way, it's semantically correct to have something there.
Interesting approach with the "1x1px transparent image placeholder" Adrian, it gave me some idea 👍
If that would be interesting, in our eco system we also published a Web Component to lazy load images.
If will first try to use native lazy loading, if not supported by the browser, will fallback on the intersection observer technique and if not supported, will display the image instantly.
Also supports src-set, svg and it is possible to define an img to display in case of error (sh*t happens).
I had to check its source code to remember what I implemented (😅). Instead of a blank pixel I hide (
opacity: 0) the image and when loaded toggle its opacity to render, kind of "smooth", transition.Thanks again for the blog post, I might add a variable to set
lazy(currently fix) oreageras you explained above.Wow! Thank you very much. Glad you've found it useful. I haven't worked with Web components, I'll have to check them out at some point.
Regarding the 1x1 placeholder, you want an image to have a src set in any moment. I think that either the HTML validator throws an error or something breaks. Either way, it's semantically correct to have something there.
Cheers!
Thank you Adrian for the really clear add-ons explanation, it makes sense.
I have to give a try (again) to check how our Web Components handles this scenario, good point.