wc-lazy v0.0.1

wc-lazy

allows to optimize the load of images based on IntersectionObserver.

lazy-img

this web-component, mediate the attribute and property src create a tag <picture> to address the loading of images, src represent the behavior of img[src] and img[srcset] so joint

normal load

Insert the picture tag, only when the intercession happens.

<lazy-img src="/my-img.jpg"></lazy-img>

<picture>
	<img src="/my-img.jpg"/>
</picture>

responsive charge

Insert the picture tag, only when the intercession happens.

<lazy-img src="/my-img2.jpg 520w, /my-img3.jpg 720w, /my-img.jpg"></lazy-img>

<picture>
	<source media="(min-width: 720px)" srcset="/my-img3.jpg"/>
	<source media="(min-width: 520px)" srcset="/my-img2.jpg"/>
	<img src="/my-img.jpg"/>
</picture>

The use of picture vs img, picture allows you to add more rules on image selection, example type and it works better with responsive art direction.

intercepted

every time that lazy-img is intercepted the attribute intercepted will be defined, for the generation of side effects, this can also be heard as an event.