Show HN: The smallest and most narcissistic image lazyloading JavaScript library

lazy.simon-frey.eu

10 points·l1am0··9 comments

IMO lazy loading the images on your websites is a good idea in 99% of the cases. As all the other lazy load libraries where way to heavy for use case I build lazy-simon.js.

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

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

Awesome. Thanks!

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>`

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.

Nice. It works now :D

This is beautiful tbh, will use in projects.

Reply on news.ycombinator.com