Show HN: The smallest and most narcissistic image lazyloading JavaScript library(lazy.simon-frey.eu)
lazy.simon-frey.eu
Show HN: The smallest and most narcissistic image lazyloading JavaScript library
https://lazy.simon-frey.eu/
4 comments
Some browsers like chrome support this functionality natively by setting the image attribute loading="lazy" (https://web.dev/native-lazy-loading/) You could improve your library by adding a check wether the browser supports it natively, if yes use the loading attribute, if no use the visibility observer
Thanks for that note! The check is added and the script uses the native lazy load if supported :D
Use svg instead of that PNG and dataset not set/getattribute and you are down to 400
When I use the svg in the img src, the image is higher as the original and thereby the size changes on lazy loading. Do you have a clue why? Used svg:
`data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><style>svg{background: grey;}</style></svg>`
`data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><style>svg{background: grey;}</style></svg>`
Do something like:
data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' />
And don't bother with the color there, just set a background-color on all IMG elements in CSS, the svg will be transparent.
And don't bother with the color there, just set a background-color on all IMG elements in CSS, the svg will be transparent.
Nice. It works now :D
Awesome. Thanks!
This is beautiful tbh, will use in projects.
It is build with JavaScript intersection observers. To keep it below 500 byte it currently only works with img tags, but I may adapt it for more HTML tags if that is useful.
I do not plan to add a lot of config options, as there are nice highly configurable lazy loading libraries out there. Mine should just be a script include and you are done :D