Native JS development, no dependency, lightweight modern browser image lazy loading plug-in

The installation

  npm install lazy-load-img --save
Copy the code

advantage

1. Native JS development, do not rely on any framework or library 2. Support all kinds of inconsistent width and height of the picture, automatically cut into the default picture of the width and height of the default picture for example, your default picture is a square picture, then all kinds of different width and height of the picture, automatically cut into the square. Perfect solution to the mobile terminal development, users upload pictures of inconsistent width and height caused by the picture deformation problem 3. Simple API, let you minute entry!!Copy the code

The default mode

var lazyLoadImg = new LazyLoadImg({ el: document.querySelector('#list'), mode: 'default', // Default mode, will display the original image, DIY mode, will custom cut, default cut center part time: 300, // set a detection interval complete: Position: {top: 0, // The distance between the elements and the top is right: }, before: function () {}, function () {}, success: function (el) { el.classList.add('success') }, error: Function (el) {el.src = './images/error.png'}}) // lazyLoadimg.start () // lazyLoadimg.destroy () // Destroy picture lazy loaderCopy the code

Results demonstrate

Custom mode

var lazyLoadImg = new LazyLoadImg({ el: document.querySelector('#list'), mode: 'DIY ', // Default mode, the original image will be displayed, DIY mode, custom clipping, default clipping center part time: 300, // Set a detection interval complete: Position: {top: 0, // The distance between the elements and the top is right: 0, // element distance right bottom: 0, // element distance bottom: 0, // element distance left: 0 // element distance left}, DIY: {// set the image clipping rules, diy mode only effect backgroundSize: 'cover', backgroundRepeat: 'no-repeat', backgroundPosition: 'center center' }, before: function () { }, success: function (el) { el.classList.add('success') }, error: Function (el) {el.src = './images/error.png'}}) // lazyLoadimg.start () // lazyLoadimg.destroy () // Destroy picture lazy loaderCopy the code

Results demonstrate