mmb-avatar-img v0.0.3

mmb-avatar-img

What is it?

mmb-avatar-img is a web component built with Stencil forked from st-img that allows you to lazy load avatar 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 setTimeout.

Set upstream repo if you want to pull in updates from original source

$ git remote add upstream https://github.com/jgw96/st-img.git

$ git remote -v origin https://github.com/meumobi/mmb-avatar-img.git (fetch) origin https://github.com/meumobi/mmb-avatar-img.git (push) upstream https://github.com/jgw96/st-img.git (fetch) upstream https://github.com/jgw96/st-img.git (push)

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/mmb-avatar-img@0.1.1/dist/mmbavatarimg.js'></script> into your index.html

API

Properties:

• src (string): the path or url to the image you want to load
• alt (string): the value you want to use for the alt property of the image https://www.w3schools.com/tags/att_img_alt.asp

Examples

 <mmb-avatar-img src="https://madeby.google.com/static/images/google_g_logo.svg" alt="google"></mmb-avatar-img>