Now Printing Money

    mazey-lazy-load-images
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.0 • Public • Published

    mazey-lazy-load-images

    NPM version l

    Lazy load images.

    Install

    You can get mazey-lazy-load-images via npm.

    npm install mazey-lazy-load-images --save
    

    Usage

    import { lazyLoadImages } from 'mazey-lazy-load-images';
    
    lazyLoadImages({
      images: [ // Data contains images.
        {
          name: 'Example1',
          img: [
            'https://i.mazey.net/icon/sizes/600x200.jpg',
            'https://i.mazey.net/icon/sizes/200x400.jpg',
            'https://i.mazey.net/icon/sizes/400x200.jpg',
            'https://i.mazey.net/icon/sizes/600x200.jpg',
            'https://i.mazey.net/icon/sizes/400x200.jpg',
            'https://i.mazey.net/icon/sizes/400x200.jpg',
          ]
        },
        {
          name: 'Example2',
          img: [
            'https://i.mazey.net/icon/sizes/800x600.jpg',
            'https://i.mazey.net/icon/sizes/800x600.jpg',
            'https://i.mazey.net/icon/sizes/200x400.jpg',
          ]
        },
      ],
      container: '.box', // A String can be used by `document.querySelector()`, such as: `.box` or `#entry-content`.
      defaultImg: 'https://i.mazey.net/icon/sizes/200x200.jpg', // Default load image.
    });
    

    DOM

    <div class="box">
      <div class="m-box">
        
        <div>
          <div>
            <span>1. Example1</span>
          </div>
          <div class="m-img">
            
          <div><img src="https://i.mazey.net/icon/sizes/600x200.jpg" data-src="https://i.mazey.net/icon/sizes/600x200.jpg" class="m-img-item" loading="lazy"></div>
        
          <div><img src="https://i.mazey.net/icon/sizes/200x400.jpg" data-src="https://i.mazey.net/icon/sizes/200x400.jpg" class="m-img-item" loading="lazy"></div>
        
          <div><img src="https://i.mazey.net/icon/sizes/400x200.jpg" data-src="https://i.mazey.net/icon/sizes/400x200.jpg" class="m-img-item" loading="lazy"></div>
        
          <div><img src="https://i.mazey.net/icon/sizes/600x200.jpg" data-src="https://i.mazey.net/icon/sizes/600x200.jpg" class="m-img-item" loading="lazy"></div>
        
          <div><img src="https://i.mazey.net/icon/sizes/400x200.jpg" data-src="https://i.mazey.net/icon/sizes/400x200.jpg" class="m-img-item" loading="lazy"></div>
        
          <div><img src="https://i.mazey.net/icon/sizes/400x200.jpg" data-src="https://i.mazey.net/icon/sizes/400x200.jpg" class="m-img-item" loading="lazy"></div>
        
          </div>
        </div>
      
        <div>
          <div>
            <span>2. Example2</span>
          </div>
          <div class="m-img">
            
          <div><img src="https://i.mazey.net/icon/sizes/800x600.jpg" data-src="https://i.mazey.net/icon/sizes/800x600.jpg" class="m-img-item" loading="lazy"></div>
        
          <div><img src="https://i.mazey.net/icon/sizes/800x600.jpg" data-src="https://i.mazey.net/icon/sizes/800x600.jpg" class="m-img-item" loading="lazy"></div>
        
          <div><img src="https://i.mazey.net/icon/sizes/200x400.jpg" data-src="https://i.mazey.net/icon/sizes/200x400.jpg" class="m-img-item" loading="lazy"></div>
        
          </div>
        </div>
      
      </div>
    </div>
    

    Contributing

    # dev
    npm run dev
    
    # build
    npm run build
    
    # documentation
    npm run docs
    

    Install

    npm i mazey-lazy-load-images

    DownloadsWeekly Downloads

    20

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    129 kB

    Total Files

    12

    Last publish

    Collaborators

    • mazeyqian