• https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video
• https://developers.google.com/web/updates/2016/04/intersectionobserver
• https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver

if support IntersectionObserver and use it

fallback use scroll detect getBoundingClientRect

img tag need add

• class -> lazy

• data-src -> lazyload image

• data-srcset (option) -> lazyload hight resolution image

<ul>
  <li>
    <img class="lazy" src="d4.png" data-src="image.png" data-srcset="[email protected] 2x" alt="">
  </li>
  <li>
    <img class="lazy" src="d4.png" data-src="image.png" data-srcset="[email protected] 2x" alt="">
  </li>
</ul>

• dom - setting dom & it's child img has class lazy can lazyload

• fallback (option) - true / false

simpleImgLazyLoad({
  dom: document.querySelector('ul')
});