Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

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

lazy.simon-frey.eu

Post reply on HN
Print view View original

1–10 of 10 posts

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

#2

Post by 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

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

#5

Post by l1am0 »

phillipseamore wrote: post #3

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{background" rel="nofollow">http://www.w3.org/2000/svg">svg{background: grey;}`

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

#6

Post by phillipseamore »

l1am0 wrote: post #5
phillipseamore wrote: post #3

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{background" rel="nofollow">http://www.w3.org/2000/svg"> svg{background : grey;} `

Do something like: data:image/svg+xml,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.

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

#7

Post by alexza »

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

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

#8

Post by l1am0 »

phillipseamore wrote: post #6
l1am0 wrote: post #5

Earlier quoted context omitted.

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{background" rel="nofollow">http://www.w3.org/2000/svg"> svg{background : grey;} `

Do something like: data:image/svg+xml, 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

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

#9

Post by l1am0 »

alexza wrote: post #7

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
Post reply on HN