3 ms·
Show HN: The smallest and most narcissistic image lazyloading JavaScript library
- l1am0 7y agoIMO 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
- phillipseamore 7y agoUse svg instead of that PNG and dataset not set/getattribute and you are down to 400
- l1am0 7y agoAwesome. Thanks!
- l1am0 7y agoWhen 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 7y agoDo 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 7y agoNice. It works now :D
- alexza 7y agoSome 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 7y agoThanks for that note! The check is added and the script uses the native lazy load if supported :D
- adawg_4 7y agoThis is beautiful tbh, will use in projects.