jh-st-img

What is it?

jh-st-img is a web component built with Stencil that allows you to lazy load images as the user scrolls them into the viewport. On supported browsers (Chrome and chrome based browsers, Firefox and Edge) it uses IntersectionObserver to accomplish this functionality. For Safari and IE it simply falls back to the BoundingClientRect method.

Usage

To use this component in your app, no matter what framework you are using, follow these steps:

• pop this script tag <script async defer src='https://unpkg.com/jh-st-img@0.1.0/dist/jhstimg.js'></script> into your index.html

API

Properties:

• alt (string): the value you want to use for the alt property of the image https://www.w3schools.com/tags/att_img_alt.asp
• imgClass (string): the class(es) you want to set as class property of the image
• src (string): the path or url to the image you want to load
• sources (string|JhStImgSource[]): the sources to add to picture https://www.w3schools.com/tags/tag_picture.asp, as JhStImgSource type array or JSON encoded string (for vanilla HTML page usage)

Types:

type JhStImgSource = {
  sizes?: string
  srcset: string
  type?: string
  media?: string
}

Examples

Simple without sources, just lazy loading one image:

 <jh-st-img src="https://madeby.google.com/static/images/google_g_logo.svg"
            alt="google logo"
            img-class="img-thumbnail"
            title="google">
 </jh-st-img>

Vanilla HTML page, two image sizes with alternative webp image:

 <jh-st-img src="/path/to/large/jpg/image.jpg"
            alt="image"
            img-class="img-thumbnail"
            sources='[{"srcset":"/path/to/small/jpg/image.jpg", "type": "image/jpeg", "media": "max-width: 599px"},{"srcset":"/path/to/small/jpg/image.webp", "type": "image/webp", "media": "max-width: 599px"},{"srcset":"/path/to/large/jpg/image.jpg", "type": "image/jpeg", "media": "min-width: 600px"},{"srcset":"/path/to/large/jpg/image.webp", "type": "image/webp", "media": "min-width: 600px"}]' 
            title="best mathing image loaded from picture sources">
 </jh-st-img>

Changelog

1.0.0

BREAKING:

• Typo in types (#8)

TASKS:

• Add changelog to readme.md (#10)
• Remove github templates (#9)

0.1.1

• First public release

0.1.0

• First release