
Show HN: The smallest and most narcissistic image lazyloading JavaScript library - l1am0
https://lazy.simon-frey.eu/
======
l1am0
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

------
alexza
Some browsers like chrome support this functionality natively by setting the
image attribute loading="lazy" ([https://web.dev/native-lazy-
loading/](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

~~~
l1am0
Thanks for that note! The check is added and the script uses the native lazy
load if supported :D

------
phillipseamore
Use svg instead of that PNG and dataset not set/getattribute and you are down
to 400

~~~
l1am0
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](http://www.w3.org/2000/svg"><style>svg{background):
grey;}</style></svg>`

~~~
phillipseamore
Do something like: data:image/svg+xml,<svg
xmlns='[http://www.w3.org/2000/svg'](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.

~~~
l1am0
Nice. It works now :D

------
adawg_4
This is beautiful tbh, will use in projects.

