{"_id":"vue-lazyload-next","_rev":"3-7dcbaf021636c949869b85107e173494","name":"vue-lazyload-next","dist-tags":{"latest":"0.0.2"},"versions":{"0.0.1":{"name":"vue-lazyload-next","version":"0.0.1","description":"Vue module for lazy-loading images in your vue3.0 applications.","main":"vue-lazyload-next.js","module":"vue-lazyload-next.esm.js","unpkg":"vue-lazyload-next.js","scripts":{"build":"rollup -c","lint":"eslint ./src","test":"karma start","test:types":"tsc -p types/test","test:debug":"cross-env DEBUG=true karma start"},"repository":{"type":"git","url":"git+https://github.com/caozhong1996/vue-lazyload-next.git"},"typings":"types/index.d.ts","keywords":["vue-lazyload-next","vue","lazyload","vue-directive"],"author":{"name":"caozhong","email":"caozhong1996@gmail.com"},"bugs":{"url":"https://github.com/caozhong1996/vue-lazyload-next/issues"},"browserslist":["> 1%","last 2 versions","not ie"],"license":"MIT","devDependencies":{"assign-deep":"^1.0.1","babel-cli":"^6.26.0","babel-core":"^6.26.3","babel-plugin-external-helpers":"^6.22.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-stage-0":"^6.24.1","babel-register":"^6.26.0","chai":"^4.2.0","eslint":"^7.18.0","eslint-config-standard":"^16.0.2","eslint-plugin-import":"^2.22.1","eslint-plugin-node":"^11.1.0","eslint-plugin-promise":"^4.2.1","eslint-plugin-standard":"^3.0.1","karma":"^6.0.3","karma-chai":"^0.1.0","karma-chrome-launcher":"^3.1.0","karma-coverage":"^2.0.3","karma-expect":"^1.1.3","karma-mocha":"^2.0.1","karma-rollup-preprocessor":"^7.0.5","mocha":"^8.2.1","puppeteer":"^5.5.0","rollup":"^2.38.1","rollup-plugin-babel":"^2.6.1","rollup-plugin-commonjs":"^8.4.1","rollup-plugin-node-resolve":"^3.2.0","rollup-plugin-replace":"^2.0.0","rollup-plugin-terser":"^7.0.2","vue":"^3.0.5","rollup-plugin-typescript":"^1.0.1","tslib":"^2.1.0","typescript":"^4.1.3"},"gitHead":"05f19a30aed98dbe2e9b8f28d14302cb8a550dc9","homepage":"https://github.com/caozhong1996/vue-lazyload-next#readme","_id":"vue-lazyload-next@0.0.1","_nodeVersion":"14.6.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-elwvfe7PZdl/jBtxUmIAhHpHYf9CJ5zuCTv2de3kjpP0Ft4WKp4yP9DgZTnIeU+ByZq7YN8GN5tdMO1311ettw==","shasum":"b455eb737bec668bca402e5e2230a1073bae9d55","tarball":"https://registry.npmjs.org/vue-lazyload-next/-/vue-lazyload-next-0.0.1.tgz","fileCount":28,"unpackedSize":96503,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIkPOCRA9TVsSAnZWagAAqWYP/RJU/a06HkC9SkE0rg4J\nYe9KgST5NXqCQD31B4NBz0PTzrJmTAoaVFZryoDX4DiJLHf6K5n3x+9tuq2o\nUTfF7M4Ok/+anCh1a6G1Rrb78trbejm2sNnU5JD1U73QPOB+WItb6TM+1gX/\nz/jTKYpBN22uraeqyPohZ6L8bQwjCT3jBtcxR8FJtPw8qsG2kIVs3VSA30MN\nlMeeulkVVe4ZTvhsicRMZhKXHQGMkBvsZAVTjqy+/mfhJV8fvSZpFyJsK6gO\nlBbX+SaHBRS1nRM2t5E2wxVwZJ+7jYEo1nigdJTYihTzdRU1/Uh3qBlmeD0t\nP7HhYUd4Hc695ElgO1pQpO+l3MFnVD4fP7Jq0ffNrssv//tfwcJyBT3v6/ck\nw3EdmPNhPlsfa93LPhcdAKkZLx8K2xhVimcnQ0w9nqq1cptRSmdDU81wiCk5\nK3QXDmcz6fvvkf5tDc7HhCrFeCXaR/28++wHdLZNhFakF87k/zYHrxS8k7WM\nsPD+52eaoxnhm1Rz2SbHYu4JhWXp+j9kt39OrZ0sqNyW9eLJlNMPfTy92ZAL\ng4pYGgEa/3O2A91EsP0zaRcgoG8EMmxBIae340X72tp2QwSDtVuXmxhLO1Kq\nfRyopYkY2e/I8LKPHfYNpIdiYKdQ68G3++XX0spLjCp0e11CC/H2o85KWJjV\n7/eg\r\n=a/jn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDyZMKfUZsaiiWdZEpi9uShdA3AjQTI1BoSSj5PGQFMCwIhAJvLcJD+0YLEZJTROA3Ip3pWa8/Yh+dBixrZrM16pdO3"}]},"_npmUser":{"name":"caozhong","email":"836934184@qq.com"},"directories":{},"maintainers":[{"name":"caozhong","email":"836934184@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-lazyload-next_0.0.1_1612858317055_0.7787348079306364"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.0.2":{"name":"vue-lazyload-next","version":"0.0.2","description":"Vue module for lazy-loading images in your vue3.0 applications.","main":"vue-lazyload-next.js","module":"vue-lazyload-next.esm.js","unpkg":"vue-lazyload-next.js","scripts":{"build":"rollup -c","lint":"eslint ./src","test":"karma start","test:types":"tsc -p types/test","test:debug":"cross-env DEBUG=true karma start"},"repository":{"type":"git","url":"git+https://github.com/caozhong1996/vue-lazyload-next.git"},"typings":"types/index.d.ts","keywords":["vue-lazyload-next","vue","vue3.0","image-lazyload","vue-directive"],"author":{"name":"caozhong","email":"caozhong1996@gmail.com"},"bugs":{"url":"https://github.com/caozhong1996/vue-lazyload-next/issues"},"browserslist":["> 1%","last 2 versions","not ie"],"license":"MIT","devDependencies":{"assign-deep":"^1.0.1","babel-cli":"^6.26.0","babel-core":"^6.26.3","babel-plugin-external-helpers":"^6.22.0","babel-polyfill":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-stage-0":"^6.24.1","babel-register":"^6.26.0","chai":"^4.2.0","eslint":"^7.18.0","eslint-config-standard":"^16.0.2","eslint-plugin-import":"^2.22.1","eslint-plugin-node":"^11.1.0","eslint-plugin-promise":"^4.2.1","eslint-plugin-standard":"^3.0.1","karma":"^6.0.3","karma-chai":"^0.1.0","karma-chrome-launcher":"^3.1.0","karma-coverage":"^2.0.3","karma-expect":"^1.1.3","karma-mocha":"^2.0.1","karma-rollup-preprocessor":"^7.0.5","mocha":"^8.2.1","puppeteer":"^5.5.0","rollup":"^2.38.1","rollup-plugin-babel":"^2.6.1","rollup-plugin-commonjs":"^8.4.1","rollup-plugin-node-resolve":"^3.2.0","rollup-plugin-replace":"^2.0.0","rollup-plugin-terser":"^7.0.2","vue":"^3.0.5","rollup-plugin-typescript":"^1.0.1","tslib":"^2.1.0","typescript":"^4.1.3"},"gitHead":"75192a421a2e5bee8827a95f1dcfd49e303bba7f","homepage":"https://github.com/caozhong1996/vue-lazyload-next#readme","_id":"vue-lazyload-next@0.0.2","_nodeVersion":"12.1.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-mejBH5KmYG5ieRVHRImC/GHsJ4GCJN/Oyvf1mlQNzpEHgeve0PRjNqpLRdwHrD1BL7SjD49T1I3Z7Ilarq9miQ==","shasum":"dd8b0b5f46610bd2a171eeed69540f5384e004f0","tarball":"https://registry.npmjs.org/vue-lazyload-next/-/vue-lazyload-next-0.0.2.tgz","fileCount":28,"unpackedSize":96517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggYUTCRA9TVsSAnZWagAAFZcP/Rf87n1rm6ZtTjEb9ApB\n5Q4p/DUqwZirFyx1H4wm9rhBRu1k5e+YP/aN2+8m1wrLwNd0q7UT1CCcrEer\nyQ7mzCoOIFyq9zDQf1pug/8JqHxqdugmyWycIIUbt3D3ijxagPtbIqGHN5/q\nSEWc8FjEmFBTGD0hTuckoTDSMKoT/ZhJZnxzcL8gZGrVYvxqpdSnCmZmTDnv\nWjQijflBJj1PMWzjs29jwzN7Qz0AZnsGbbwA0kySyYCbsZxJJ+HBWdxbX1To\nCNBS8ds5/5/8EWyIrLA3i09F2JSG43CzP56xzqHWa+ruL1/KREAoHspS/yH/\nTthcb0keILR8xuRirN02Rq+VEXyV5umebd8qqXst51V4IrIn9VmFkS7N0DDT\ngY0seNwyYV7ych+fOA8oRJgwNrLjV7vHCbUD2EbO68Efoo8bHdbOariMsH1m\nf5fYk50XwHEgwgc2H9GHRXgrIbvJnoykqBk7YM+ElGW/9AqklLQUCwtsCrlO\nFajcH7kBAItHA4LHBApm63t+oYqUhj+YcBQdFGwr4H3z6kGLknwbWwiBrPTH\nqHOMNnttE09z3rzz2+qK0/mu4xm+N7I++kp4bM8hA3jL4P3TgokSMFxGqAte\nCnJJHCJ7z8vJo6rNU1KoqMNV62b54tPOUNtb9U8CRoBjHMzP0yKqnt1M7002\nZHin\r\n=SQC7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICpepe6Z8VoPqI6W8+tc1VcD0QWf1+FtSagtlkwK+pVCAiB8heDVxk3QSPnYZ2zkfn+N52SM/lHVhVjK3BkutFJ15g=="}]},"_npmUser":{"name":"caozhong","email":"836934184@qq.com"},"directories":{},"maintainers":[{"name":"caozhong","email":"836934184@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-lazyload-next_0.0.2_1619100947007_0.09222929891775844"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."}},"time":{"created":"2021-02-09T08:11:57.054Z","0.0.1":"2021-02-09T08:11:57.651Z","modified":"2022-06-02T05:51:58.397Z","0.0.2":"2021-04-22T14:15:47.206Z"},"maintainers":[{"name":"caozhong","email":"836934184@qq.com"}],"description":"Vue module for lazy-loading images in your vue3.0 applications.","homepage":"https://github.com/caozhong1996/vue-lazyload-next#readme","keywords":["vue-lazyload-next","vue","vue3.0","image-lazyload","vue-directive"],"repository":{"type":"git","url":"git+https://github.com/caozhong1996/vue-lazyload-next.git"},"author":{"name":"caozhong","email":"caozhong1996@gmail.com"},"bugs":{"url":"https://github.com/caozhong1996/vue-lazyload-next/issues"},"license":"MIT","readme":"# vue-lazyload-next\r\n\r\nVue module for lazyloading images in your Vue 3.0 applications. This module is base on vue-lazyload. Vue 1.x or 2.x please use [vue-lazyload](https://github.com/hilongjw/vue-lazyload). There are some improvements:\r\n\r\n* supports Vue 3.0\r\n* use es6 api, more lightweight\r\n* add typescript for this module\r\n\r\n\r\n\r\n\r\n# Table of Contents\r\n\r\n* [___Requirements___](#requirements)\r\n* [___Installation___](#installation)\r\n* [___Usage___](#usage)\r\n * [___Constructor Options___](#constructor-options)\r\n * [___Implementation___](#implementation)\r\n    * [___Basic___](#basic)\r\n    * [___Css state___](#css-state)\r\n* [___Methods___](#methods)\r\n  * [__Event hook__](#event-hook)\r\n  * [__LazyLoadHandler__](#lazyloadhandler)\r\n  * [__Performance__](#performance)\r\n* [___Authors && Contributors___](#authors-&&-Contributors)\r\n* [___License___](#license)\r\n\r\n# Requirements\r\n\r\n- [Vue.js](https://github.com/vuejs/vue-next) `3.x`\r\n\r\n\r\n# Installation\r\n\r\n## npm\r\n\r\n```bash\r\n\r\n$ npm i vue-lazyload-next -S\r\n\r\n```\r\n\r\n## yarn\r\n\r\n```bash\r\n\r\n$ yarn add vue-lazyload-next\r\n\r\n```\r\n\r\n<script>\r\n  Vue.use(VueLazyload)\r\n  ...\r\n</script>\r\n\r\n```\r\n\r\n# Usage\r\n\r\nmain.js:\r\n\r\n```javascript\r\n\r\nimport { createApp } from 'vue'\r\nimport VueLazyloadNext from 'vue-lazyload-next'\r\n\r\ncreateApp(App)\r\n  .use(VueLazyloadNext)\r\n  .mount('#app')\r\n\r\n// or with options\r\nconst loadimage = require('./assets/loading.gif')\r\nconst errorimage = require('./assets/error.gif')\r\n\r\ncreateApp(App)\r\n  .use(\r\n    VueLazyloadNext, \r\n    {\r\n      preLoad: 1.3,\r\n      error: errorimage,\r\n      loading: loadimage,\r\n      attempt: 1\r\n    }\r\n  )\r\n  .mount('#app')\r\n\r\n```\r\n\r\ntemplate:\r\n\r\n```html\r\n<ul>\r\n  <li v-for=\"img in list\">\r\n    <img v-lazy=\"img.src\" >\r\n  </li>\r\n</ul>\r\n```\r\n\r\nuse `v-lazy-container` work with raw HTML\r\n\r\n```html\r\n<div v-lazy-container=\"{ selector: 'img' }\">\r\n  <img data-src=\"//domain.com/img1.jpg\">\r\n  <img data-src=\"//domain.com/img2.jpg\">\r\n  <img data-src=\"//domain.com/img3.jpg\">  \r\n</div>\r\n```\r\n\r\ncustom `error` and `loading` placeholder image\r\n\r\n```html\r\n<div v-lazy-container=\"{ selector: 'img', error: 'xxx.jpg', loading: 'xxx.jpg' }\">\r\n  <img data-src=\"//domain.com/img1.jpg\">\r\n  <img data-src=\"//domain.com/img2.jpg\">\r\n  <img data-src=\"//domain.com/img3.jpg\">  \r\n</div>\r\n```\r\n\r\n```html\r\n<div v-lazy-container=\"{ selector: 'img' }\">\r\n  <img data-src=\"//domain.com/img1.jpg\" data-error=\"xxx.jpg\">\r\n  <img data-src=\"//domain.com/img2.jpg\" data-loading=\"xxx.jpg\">\r\n  <img data-src=\"//domain.com/img3.jpg\">  \r\n</div>\r\n```\r\n\r\n## Constructor Options\r\n\r\n|key|description|default|options|\r\n|:---|---|---|---|\r\n| `preLoad`|proportion of pre-loading height|`1.3`|`Number`|\r\n|`error`|src of the image upon load fail|`'data-src'`|`String`\r\n|`loading`|src of the image while loading|`'data-src'`|`String`|\r\n|`attempt`|attempts count|`3`|`Number`|\r\n|`listenEvents`|events that you want vue listen for|`['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove']`| [Desired Listen Events](#desired-listen-events) |\r\n|`adapter`| dynamically modify the attribute of element |`{ }`| [Element Adapter](#element-adapter) |\r\n|`filter`| the image's listener filter |`{ }`| [Image listener filter](#image-listener-filter) |\r\n|`lazyComponent`| lazyload component | `false` | [Lazy Component](#lazy-component)\r\n| `dispatchEvent`|trigger the dom event|`false`|`Boolean`|\r\n| `throttleWait`|throttle wait|`200`|`Number`|\r\n| `observer`|use IntersectionObserver|`false`|`Boolean`|\r\n| `observerOptions`|IntersectionObserver options|{ rootMargin: '0px', threshold: 0.1 }|[IntersectionObserver](#intersectionobserver)|\r\n| `silent`|do not print debug info|`true`|`Boolean`|\r\n\r\n### Desired Listen Events\r\n\r\nYou can configure which events you want vue-lazyload-next by passing in an array\r\nof listener names.\r\n\r\n```javascript\r\nVue.use(VueLazyloadNext, {\r\n  preLoad: 1.3,\r\n  error: 'dist/error.png',\r\n  loading: 'dist/loading.gif',\r\n  attempt: 1,\r\n  // the default is ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend']\r\n  listenEvents: [ 'scroll' ]\r\n})\r\n```\r\n\r\nThis is useful if you are having trouble with this plugin resetting itself to loading\r\nwhen you have certain animations and transitions taking place\r\n\r\n\r\n### Image listener filter\r\n\r\ndynamically modify the src of image\r\n\r\n```javascript\r\nVue.use(vueLazy, {\r\n    filter: {\r\n      progressive (listener, options) {\r\n          const isCDN = /qiniudn.com/\r\n          if (isCDN.test(listener.src)) {\r\n              listener.el.setAttribute('lazy-progressive', 'true')\r\n              listener.loading = listener.src + '?imageView2/1/w/10/h/10'\r\n          }\r\n      },\r\n      webp (listener, options) {\r\n          if (!options.supportWebp) return\r\n          const isCDN = /qiniudn.com/\r\n          if (isCDN.test(listener.src)) {\r\n              listener.src += '?imageView2/2/format/webp'\r\n          }\r\n      }\r\n    }\r\n})\r\n```\r\n\r\n\r\n### Element Adapter\r\n\r\n```javascript\r\nVue.use(vueLazy, {\r\n    adapter: {\r\n        loaded ({ bindType, el, naturalHeight, naturalWidth, $parent, src, loading, error, Init }) {\r\n            // do something here\r\n            // example for call LoadedHandler\r\n            LoadedHandler(el)\r\n        },\r\n        loading (listender, Init) {\r\n            console.log('loading')\r\n        },\r\n        error (listender, Init) {\r\n            console.log('error')\r\n        }\r\n    }\r\n})\r\n```\r\n\r\n### IntersectionObserver\r\n\r\nuse [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) to to improve performance of a large number of nodes.\r\n\r\n```javascript\r\nVue.use(vueLazy, {\r\n  // set observer to true\r\n  observer: true,\r\n\r\n  // optional\r\n  observerOptions: {\r\n    rootMargin: '0px',\r\n    threshold: 0.1\r\n  }\r\n})\r\n```\r\n\r\n\r\n### Lazy Component\r\n```javascript\r\nVue.use(VueLazyloadNext, {\r\n  lazyComponent: true\r\n});\r\n```\r\n\r\n```html\r\n<lazy-component @show=\"handler\">\r\n  <img class=\"mini-cover\" :src=\"img.src\" width=\"100%\" height=\"400\">\r\n</lazy-component>\r\n\r\n<script>\r\n  {\r\n    ...\r\n    methods: {\r\n      handler (component) {\r\n        console.log('this component is showing')\r\n      }\r\n    }\r\n\r\n  }\r\n</script>\r\n```\r\nUse in list\r\n```html\r\n<lazy-component v-for=\"(item, index) in list\" :key=\"item.src\" >\r\n  <img class=\"mini-cover\" :src=\"item.src\" width=\"100%\" height=\"400\">\r\n</lazy-component>\r\n```\r\n\r\n\r\n## Implementation\r\n\r\n### Basic\r\n\r\nvue-lazyload-next will set this img element's `src` with `imgUrl` string\r\n\r\n```html\r\n<script>\r\nexport default {\r\n  data () {\r\n    return {\r\n      imgObj: {\r\n        src: 'http://xx.com/logo.png',\r\n        error: 'http://xx.com/error.png',\r\n        loading: 'http://xx.com/loading-spin.svg'\r\n      },\r\n      imgUrl: 'http://xx.com/logo.png' // String\r\n    }\r\n  }\r\n}\r\n</script>\r\n\r\n<template>\r\n  <div ref=\"container\">\r\n     <img v-lazy=\"imgUrl\"/>\r\n     <div v-lazy:background-image=\"imgUrl\"></div>\r\n\r\n     <!-- with customer error and loading -->\r\n     <img v-lazy=\"imgObj\"/>\r\n     <div v-lazy:background-image=\"imgObj\"></div>\r\n\r\n     <!-- Customer scrollable element -->\r\n     <img v-lazy.container =\"imgUrl\"/>\r\n     <div v-lazy:background-image.container=\"img\"></div>\r\n\r\n    <!-- srcset -->\r\n    <img v-lazy=\"'img.400px.jpg'\" data-srcset=\"img.400px.jpg 400w, img.800px.jpg 800w, img.1200px.jpg 1200w\">\r\n    <img v-lazy=\"imgUrl\" :data-srcset=\"imgUrl' + '?size=400 400w, ' + imgUrl + ' ?size=800 800w, ' + imgUrl +'/1200.jpg 1200w'\" />\r\n  </div>\r\n</template>\r\n```\r\n\r\n### CSS state\r\n\r\nThere are three states while img loading\r\n\r\n`loading`  `loaded`  `error`\r\n\r\n```html\r\n<img src=\"imgUrl\" lazy=\"loading\">\r\n<img src=\"imgUrl\" lazy=\"loaded\">\r\n<img src=\"imgUrl\" lazy=\"error\">\r\n```\r\n\r\n```html\r\n<style>\r\n  img[lazy=loading] {\r\n    /*your style here*/\r\n  }\r\n  img[lazy=error] {\r\n    /*your style here*/\r\n  }\r\n  img[lazy=loaded] {\r\n    /*your style here*/\r\n  }\r\n  /*\r\n  or background-image\r\n  */\r\n  .yourclass[lazy=loading] {\r\n    /*your style here*/\r\n  }\r\n  .yourclass[lazy=error] {\r\n    /*your style here*/\r\n  }\r\n  .yourclass[lazy=loaded] {\r\n    /*your style here*/\r\n  }\r\n</style>\r\n```\r\n\r\n## Methods\r\n\r\n### Event Hook\r\n\r\n`vm.$Lazyload.$on(event, callback)`\r\n`vm.$Lazyload.$off(event, callback)`\r\n`vm.$Lazyload.$once(event, callback)`\r\n\r\n- `$on` Listen for a custom events `loading`, `loaded`, `error`\r\n- `$once` Listen for a custom event, but only once. The listener will be removed once it triggers for the first time.\r\n- `$off` Remove event listener(s).\r\n\r\n#### `vm.$Lazyload.$on`\r\n\r\n#### Arguments:\r\n\r\n * `{string} event`\r\n * `{Function} callback`\r\n\r\n#### Example\r\n\r\n```javascript\r\nvm.$Lazyload.$on('loaded', function ({ bindType, el, naturalHeight, naturalWidth, $parent, src, loading, error }, formCache) {\r\n  console.log(el, src)\r\n})\r\n```\r\n\r\n#### `vm.$Lazyload.$once`\r\n\r\n#### Arguments:\r\n\r\n * `{string} event`\r\n * `{Function} callback`\r\n\r\n#### Example\r\n\r\n```javascript\r\nvm.$Lazyload.$once('loaded', function ({ el, src }) {\r\n  console.log(el, src)\r\n})\r\n```\r\n\r\n#### `vm.$Lazyload.$off`\r\n\r\nIf only the event is provided, remove all listeners for that event\r\n\r\n#### Arguments:\r\n\r\n * `{string} event`\r\n * `{Function} callback`\r\n\r\n#### Example\r\n\r\n```javascript\r\nfunction handler ({ el, src }, formCache) {\r\n  console.log(el, src)\r\n}\r\nvm.$Lazyload.$on('loaded', handler)\r\nvm.$Lazyload.$off('loaded', handler)\r\nvm.$Lazyload.$off('loaded')\r\n```\r\n\r\n### LazyLoadHandler\r\n\r\n`vm.$Lazyload.lazyLoadHandler`\r\n\r\nManually trigger lazy loading position calculation\r\n\r\n#### Example\r\n\r\n```javascript\r\n\r\nthis.$Lazyload.lazyLoadHandler()\r\n\r\n```\r\n\r\n### Performance\r\n\r\n```javascript\r\nthis.$Lazyload.$on('loaded', function (listener) {\r\n  console.table(this.$Lazyload.performance())\r\n})\r\n```\r\n\r\n![performance-demo](http://ww1.sinaimg.cn/large/69402bf8gw1fbo62ocvlaj213k09w78w.jpg)\r\n\r\n### Dynamic switching pictures\r\n\r\n```vue\r\n <img v-lazy=\"lazyImg\" :key=\"lazyImg.src\">\r\n```\r\n\r\n\r\n# Authors && Contributors\r\n\r\n- [hilongjw](https://github.com/hilongjw)\r\n- [imcvampire](https://github.com/imcvampire)\r\n- [darrynten](https://github.com/darrynten)\r\n- [biluochun](https://github.com/biluochun)\r\n- [whwnow](https://github.com/whwnow)\r\n- [Leopoldthecoder](https://github.com/Leopoldthecoder)\r\n- [michalbcz](https://github.com/michalbcz)\r\n- [blue0728](https://github.com/blue0728)\r\n- [JounQin](https://github.com/JounQin)\r\n- [llissery](https://github.com/llissery)\r\n- [mega667](https://github.com/mega667)\r\n- [RobinCK](https://github.com/RobinCK)\r\n- [GallenHu](https://github.com/GallenHu)\r\n\r\n# License\r\n\r\n[The MIT License](http://opensource.org/licenses/MIT)\r\n\r\n","readmeFilename":"README.md"}