Nasal Pathway Melodrama

    pure-lazyload
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    pure-lazyload

    This is an image lazy loading library with a loading icon.

    title.png

    This library works with the following browsers that support Intersection Observer.

    intersection-observer-support-browser.png

    API

    See API.md for API reference.

    Changelog

    See CHANGELOG.md.

    Examples

    There are some examples in "./examples" in this package.

    Usage

    Basic.

    basic.png

    HTML:

    <style>
      html, body {
        height: 100%;
      }
    
      body {
        padding: 0;
        background: #000;
      }
    
        img {
          display: block;
          margin: 30px auto;
          width: 470px;
          height: 354px;
          object-fit: cover;
        }
        
        h2 {
          text-align: center;
        }
    </style>
    
    <img data-src="images/1.jpg"><h2>EXAMPLE 1</h2>
    <img data-src="images/2.jpg"><h2>EXAMPLE 2</h2>
    <img data-src="images/3.jpg"><h2>EXAMPLE 3</h2>
    <img data-src="images/4.jpg"><h2>EXAMPLE 4</h2>
    <img data-src="images/5.jpg"><h2>EXAMPLE 5</h2>

    JS:

    import Lazyload from 'pure-lazyload';
    
    // Lazy loading.
    Lazyload.observe(document.querySelectorAll('img'));

    Gallery.

    gallery.png

    HTML:

    <style>
      html, body {
        height: 100%;
      }
    
      body {
        padding: 0;
        background: #000;
        color: #fff;
      }
    </style>
    
    <div class="lz-gallery">
      <figure class="lz-gallery-item"><img data-src="images/1.jpg"></figure>
      <figure class="lz-gallery-item"><img data-src="images/2.jpg"></figure>
      <figure class="lz-gallery-item lz-gallery-item-big"><img data-src="images/3.jpg"></figure>
      <figure class="lz-gallery-item"><img data-src="images/4.jpg"></figure>
      <figure class="lz-gallery-item lz-gallery-item-big"><img data-src="images/5.jpg"></figure>
      <figure class="lz-gallery-item"><img data-src="images/6.jpg"></figure>
      <figure class="lz-gallery-item"><img data-src="images/7.jpg"></figure>
      <figure class="lz-gallery-item lz-gallery-item-horizontal"><img data-src="images/8.jpg"></figure>
      <figure class="lz-gallery-item"><img data-src="images/9.jpg"></figure>
      <figure class="lz-gallery-item lz-gallery-item-horizontal"><img data-src="images/10.jpg"></figure>
      <figure class="lz-gallery-item"><img data-src="images/11.jpg"></figure>
      <figure class="lz-gallery-item"><img data-src="images/12.jpg"></figure>
      <figure class="lz-gallery-item"><img data-src="images/13.jpg"></figure>
      <figure class="lz-gallery-item lz-gallery-item-horizontal"><img data-src="images/14.jpg"></figure>
      <figure class="lz-gallery-item"><img data-src="images/15.jpg"></figure>
      <figure class="lz-gallery-item"><img data-src="images/16.jpg"></figure>
      <figure class="lz-gallery-item lz-gallery-item-big"><img data-src="images/17.jpg"></figure>
      <figure class="lz-gallery-item lz-gallery-item-vertical"><img data-src="images/18.jpg"></figure>
      <figure class="lz-gallery-item"><img data-src="images/19.jpg"></figure>
      <figure class="lz-gallery-item"><img data-src="images/20.jpg"></figure>
    </div>

    JS:

    import Lazyload from 'pure-lazyload';
    
    // Lazy loading.
    Lazyload.observe(document.querySelectorAll('img'));

    License

    MIT licensed

    Install

    npm i pure-lazyload

    DownloadsWeekly Downloads

    3

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    4.71 MB

    Total Files

    39

    Last publish

    Collaborators

    • takuya-motoshima