https://github.com/mazeyqian/mazey-lazy-load-images

Lazy load images/图片懒加载
https://github.com/mazeyqian/mazey-lazy-load-images

images javascript lazy-loading lazyload npm

Last synced: 2 months ago
JSON representation

Lazy load images/图片懒加载

• Host: GitHub
• URL: https://github.com/mazeyqian/mazey-lazy-load-images
• Owner: mazeyqian
• License: mit
• Created: 2017-09-04T12:49:36.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-16T03:05:45.000Z (almost 2 years ago)
• Last Synced: 2024-10-13T01:05:59.270Z (2 months ago)
• Topics: images, javascript, lazy-loading, lazyload, npm
• Language: JavaScript
• Homepage:
• Size: 2.16 MB
• Stars: 3
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# mazey-lazy-load-images

[![NPM version][npm-image]][npm-url]

[![l][l-image]][l-url]

[npm-image]: https://img.shields.io/npm/v/mazey-lazy-load-images

[npm-url]: https://npmjs.org/package/mazey-lazy-load-images

[l-image]: https://img.shields.io/npm/l/mazey-lazy-load-images

[l-url]: https://github.com/mazeyqian/mazey-lazy-load-images

Lazy load images.

## Install

You can get mazey-lazy-load-images via [npm](https://www.npmjs.com/package/mazey-lazy-load-images).

```

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

```



  


    

    


      


        1. Example1

      

      


        

      


    

      


    

      


    

      


    

      


    

      


    

      

    

  

    


      


        2. Example2

      

      


        

      


    

      


    

      


    

      

    

  

  



```


## Contributing

```

# dev

npm run dev

# build

npm run build

# documentation

npm run docs

```