{"_id":"vue-images-loaded","_rev":"8-f344a2af7cfde238697ea167b06f57a9","name":"vue-images-loaded","description":"Vue.js 2.0 directive to detect image loading","dist-tags":{"latest":"1.1.2"},"versions":{"1.0.0":{"name":"vue-images-loaded","version":"1.0.0","description":"A Vue.js project","author":{"name":"desmaisons_david","email":"desmaisons_david@hotmail.com"},"scripts":{"dev":"node build/dev-server.js","build":"node build/build.js"},"dependencies":{"imagesloaded":"^4.1.1","vue":"^2.1.0"},"devDependencies":{"autoprefixer":"^6.4.0","babel-core":"^6.0.0","babel-loader":"^6.0.0","babel-plugin-add-module-exports":"^0.2.1","babel-plugin-transform-runtime":"^6.0.0","babel-preset-es2015":"^6.0.0","babel-preset-stage-2":"^6.0.0","babel-register":"^6.0.0","chalk":"^1.1.3","connect-history-api-fallback":"^1.1.0","css-loader":"^0.25.0","eventsource-polyfill":"^0.9.6","express":"^4.13.3","extract-text-webpack-plugin":"^1.0.1","file-loader":"^0.9.0","function-bind":"^1.0.2","html-webpack-plugin":"^2.8.1","http-proxy-middleware":"^0.17.2","json-loader":"^0.5.4","opn":"^4.0.2","ora":"^0.3.0","semver":"^5.3.0","shelljs":"^0.7.4","url-loader":"^0.5.7","vue-loader":"^10.0.0","vue-style-loader":"^1.0.0","vue-template-compiler":"^2.1.0","vueisotope":"^2.0.3","webpack":"^1.13.2","webpack-dev-middleware":"^1.8.3","webpack-hot-middleware":"^2.12.2","webpack-merge":"^0.14.1"},"engines":{"node":">= 4.0.0","npm":">= 3.0.0"},"_id":"vue-images-loaded@1.0.0","_shasum":"feb6693525d715cd2927f6378a71450101a8ad75","_from":".","_npmVersion":"3.10.2","_nodeVersion":"4.4.3","_npmUser":{"name":"davidesmaisons","email":"desmaisons_david@hotmail.com"},"dist":{"shasum":"feb6693525d715cd2927f6378a71450101a8ad75","tarball":"https://registry.npmjs.org/vue-images-loaded/-/vue-images-loaded-1.0.0.tgz","integrity":"sha512-wDrVhIHsXG30rd9cE9Le8IZsxFhWEhX+mhnVoQhXXNw0BIjb9sCnzVUTOvpz+Z1j7KpnRfMipSMZpt22wkV5sw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICXOd1P7NzvqQlAFgPBI7DkLN9SjImYEzgRZqgvZvbAJAiEA6g3xixdy8Vv03b40Bk0ehpi0gJcjE9PH9XlRKZmzu0g="}]},"maintainers":[{"name":"davidesmaisons","email":"desmaisons_david@hotmail.com"}],"_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/vue-images-loaded-1.0.0.tgz_1483226056950_0.6272189687006176"},"directories":{}},"1.0.1":{"name":"vue-images-loaded","version":"1.0.1","description":"Vue.js 2.0 directive to detect image loading","main":"dist/vueimagesloaded.js","files":["dist/vueimagesloaded.js"],"keywords":["vue","vuejs","imagesLoaded","web-components"],"author":{"name":"David Desmaisons"},"scripts":{"dev":"node build/dev-server.js","build":"node build/build.js"},"dependencies":{"imagesloaded":"^4.1.1","vue":"^2.1.0"},"devDependencies":{"autoprefixer":"^6.4.0","babel-core":"^6.0.0","babel-loader":"^6.0.0","babel-plugin-add-module-exports":"^0.2.1","babel-plugin-transform-runtime":"^6.0.0","babel-preset-es2015":"^6.0.0","babel-preset-stage-2":"^6.0.0","babel-register":"^6.0.0","chalk":"^1.1.3","connect-history-api-fallback":"^1.1.0","css-loader":"^0.25.0","eventsource-polyfill":"^0.9.6","express":"^4.13.3","extract-text-webpack-plugin":"^1.0.1","file-loader":"^0.9.0","function-bind":"^1.0.2","html-webpack-plugin":"^2.8.1","http-proxy-middleware":"^0.17.2","json-loader":"^0.5.4","opn":"^4.0.2","ora":"^0.3.0","semver":"^5.3.0","shelljs":"^0.7.4","url-loader":"^0.5.7","vue-loader":"^10.0.0","vue-style-loader":"^1.0.0","vue-template-compiler":"^2.1.0","vueisotope":"^2.0.3","webpack":"^1.13.2","webpack-dev-middleware":"^1.8.3","webpack-hot-middleware":"^2.12.2","webpack-merge":"^0.14.1"},"engines":{"node":">= 4.0.0","npm":">= 3.0.0"},"bugs":{"url":"https://github.com/David-Desmaisons/Vue.ImagesLoaded/issues"},"license":"MIT","homepage":"https://github.com/David-Desmaisons/Vue.ImagesLoaded#readme","repository":{"type":"git","url":"git+https://github.com/David-Desmaisons/Vue.ImagesLoaded.git"},"_id":"vue-images-loaded@1.0.1","_shasum":"be57b2c0e6485ba316d351ada18baaada82b1cea","_from":".","_npmVersion":"3.10.2","_nodeVersion":"4.4.3","_npmUser":{"name":"davidesmaisons","email":"desmaisons_david@hotmail.com"},"dist":{"shasum":"be57b2c0e6485ba316d351ada18baaada82b1cea","tarball":"https://registry.npmjs.org/vue-images-loaded/-/vue-images-loaded-1.0.1.tgz","integrity":"sha512-o0sDVFry63+okWObyS0CqMfD4KvaX/Z3+KB1tguYH/jhWoo6p3EGmi2or6VgFYHNFTB5l20VLgaGhJq8IQZCKA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHAbiCQdaMtUqOKKAm+MxYwhMUKT5qai+n05imfZwtqcAiEAklwqadMtC4TvSPeBApPIBhgXEcgfBf8JA4IIKUNMY9U="}]},"maintainers":[{"name":"davidesmaisons","email":"desmaisons_david@hotmail.com"}],"_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/vue-images-loaded-1.0.1.tgz_1483226349484_0.14878151728771627"},"directories":{}},"1.1.0":{"name":"vue-images-loaded","version":"1.1.0","description":"Vue.js 2.0 directive to detect image loading","main":"dist/vueimagesloaded.js","files":["dist/vueimagesloaded.js"],"keywords":["vue","vuejs","imagesLoaded","web-components"],"author":{"name":"David Desmaisons"},"scripts":{"dev":"node build/dev-server.js","build":"node build/build.js"},"dependencies":{"imagesloaded":"^4.1.1","vue":"^2.1.0"},"devDependencies":{"autoprefixer":"^6.4.0","babel-core":"^6.0.0","babel-loader":"^6.0.0","babel-plugin-add-module-exports":"^0.2.1","babel-plugin-transform-runtime":"^6.0.0","babel-preset-es2015":"^6.0.0","babel-preset-stage-2":"^6.0.0","babel-register":"^6.0.0","chalk":"^1.1.3","connect-history-api-fallback":"^1.1.0","css-loader":"^0.25.0","eventsource-polyfill":"^0.9.6","express":"^4.13.3","extract-text-webpack-plugin":"^1.0.1","file-loader":"^0.9.0","function-bind":"^1.0.2","html-webpack-plugin":"^2.8.1","http-proxy-middleware":"^0.17.2","json-loader":"^0.5.4","opn":"^4.0.2","ora":"^0.3.0","semver":"^5.3.0","shelljs":"^0.7.4","url-loader":"^0.5.7","vue-loader":"^10.0.0","vue-style-loader":"^1.0.0","vue-template-compiler":"^2.1.0","vueisotope":"^2.0.3","webpack":"^1.13.2","webpack-dev-middleware":"^1.8.3","webpack-hot-middleware":"^2.12.2","webpack-merge":"^0.14.1"},"engines":{"node":">= 4.0.0","npm":">= 3.0.0"},"bugs":{"url":"https://github.com/David-Desmaisons/Vue.ImagesLoaded/issues"},"license":"MIT","homepage":"https://github.com/David-Desmaisons/Vue.ImagesLoaded#readme","repository":{"type":"git","url":"git+https://github.com/David-Desmaisons/Vue.ImagesLoaded.git"},"gitHead":"2fb12dbe7cd28eb4c8422d3bab1be3676804c225","_id":"vue-images-loaded@1.1.0","_shasum":"7193cf1845db737c662303c0873c9480bac49166","_from":".","_npmVersion":"3.10.2","_nodeVersion":"4.4.3","_npmUser":{"name":"davidesmaisons","email":"desmaisons_david@hotmail.com"},"dist":{"shasum":"7193cf1845db737c662303c0873c9480bac49166","tarball":"https://registry.npmjs.org/vue-images-loaded/-/vue-images-loaded-1.1.0.tgz","integrity":"sha512-ruB/fQY4zbOT4L9xOL+nvkfob1D9db5BvCvI/UlWnMOP5eAnkYbUdkseNiSI+S53/fhuM6tVpOyajPvnfbW3og==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIChOcYYGXKb0bCyYni2IFC7FzDP0E5VN1Sup9kpTZ7RSAiEAqnY7gVWJEAWfFoWFb0z1blIPniKqPtFqY+6rLw9Ky/8="}]},"maintainers":[{"name":"davidesmaisons","email":"desmaisons_david@hotmail.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/vue-images-loaded-1.1.0.tgz_1483308470585_0.2623377409763634"},"directories":{}},"1.1.1":{"name":"vue-images-loaded","version":"1.1.1","description":"Vue.js 2.0 directive to detect image loading","main":"dist/vueimagesloaded.js","files":["dist/vueimagesloaded.js"],"keywords":["vue","vuejs","imagesLoaded","web-components"],"author":{"name":"David Desmaisons"},"scripts":{"dev":"node build/dev-server.js","build":"node build/build.js"},"dependencies":{"imagesloaded":"^4.1.1","vue":"^2.1.0"},"devDependencies":{"vue-bulma-progress-bar":"^1.0.0","autoprefixer":"^6.4.0","babel-core":"^6.0.0","babel-loader":"^6.0.0","babel-plugin-add-module-exports":"^0.2.1","babel-plugin-transform-runtime":"^6.0.0","babel-preset-es2015":"^6.0.0","babel-preset-stage-2":"^6.0.0","babel-register":"^6.0.0","bulma":"^0.3.0","chalk":"^1.1.3","connect-history-api-fallback":"^1.1.0","css-loader":"^0.25.0","eventsource-polyfill":"^0.9.6","express":"^4.13.3","extract-text-webpack-plugin":"^1.0.1","file-loader":"^0.9.0","function-bind":"^1.0.2","html-webpack-plugin":"^2.8.1","http-proxy-middleware":"^0.17.2","json-loader":"^0.5.4","node-sass":"^4.1.1","opn":"^4.0.2","ora":"^0.3.0","sass-loader":"^4.1.1","semver":"^5.3.0","shelljs":"^0.7.4","url-loader":"^0.5.7","vue-loader":"^10.0.0","vue-style-loader":"^1.0.0","vue-template-compiler":"^2.1.0","vueisotope":"^2.0.3","webpack":"^1.13.2","webpack-dev-middleware":"^1.8.3","webpack-hot-middleware":"^2.12.2","webpack-merge":"^0.14.1"},"engines":{"node":">= 4.0.0","npm":">= 3.0.0"},"bugs":{"url":"https://github.com/David-Desmaisons/Vue.ImagesLoaded/issues"},"license":"MIT","homepage":"https://github.com/David-Desmaisons/Vue.ImagesLoaded#readme","repository":{"type":"git","url":"git+https://github.com/David-Desmaisons/Vue.ImagesLoaded.git"},"gitHead":"389f12aa2afab477f8bcff08c534e81aad0d9d40","_id":"vue-images-loaded@1.1.1","_shasum":"f9834db854883d374df7a6a8dc4c3ec3a4904c98","_from":".","_npmVersion":"3.10.2","_nodeVersion":"4.4.3","_npmUser":{"name":"davidesmaisons","email":"desmaisons_david@hotmail.com"},"dist":{"shasum":"f9834db854883d374df7a6a8dc4c3ec3a4904c98","tarball":"https://registry.npmjs.org/vue-images-loaded/-/vue-images-loaded-1.1.1.tgz","integrity":"sha512-AmyewCIAWhBS8sgnnJrSUTZsT9N60V9TiJkW2bcm4d3jxgxQ/LOAsIjw/a2mi3F9RzaMIKY+hsie56mikb2bxw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID+fRdvR29oCPychpFPrvIJScN71u0hskbHPoT8p9LxvAiBRC+BCbQZwsizYh+7+RAPhg36y+OdsB6HBHkl1oFWhlQ=="}]},"maintainers":[{"name":"davidesmaisons","email":"desmaisons_david@hotmail.com"}],"_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/vue-images-loaded-1.1.1.tgz_1483844654541_0.6338096219114959"},"directories":{}},"1.1.2":{"name":"vue-images-loaded","version":"1.1.2","description":"Vue.js 2.0 directive to detect image loading","main":"dist/vueimagesloaded.js","files":["dist/vueimagesloaded.js"],"keywords":["vue","vuejs","imagesLoaded","web-components"],"author":{"name":"David Desmaisons"},"scripts":{"dev":"node build/dev-server.js","build":"node build/build.js"},"dependencies":{"imagesloaded":"^4.1.1","vue":"^2.1.0"},"devDependencies":{"vue-bulma-progress-bar":"^1.0.0","autoprefixer":"^6.4.0","babel-core":"^6.0.0","babel-loader":"^6.0.0","babel-plugin-add-module-exports":"^0.2.1","babel-plugin-transform-runtime":"^6.0.0","babel-preset-es2015":"^6.0.0","babel-preset-stage-2":"^6.0.0","babel-register":"^6.0.0","bulma":"^0.3.0","chalk":"^1.1.3","connect-history-api-fallback":"^1.1.0","css-loader":"^0.25.0","eventsource-polyfill":"^0.9.6","express":"^4.13.3","extract-text-webpack-plugin":"^1.0.1","file-loader":"^0.9.0","function-bind":"^1.0.2","html-webpack-plugin":"^2.8.1","http-proxy-middleware":"^0.17.2","json-loader":"^0.5.4","node-sass":"^4.1.1","opn":"^4.0.2","ora":"^0.3.0","sass-loader":"^4.1.1","semver":"^5.3.0","shelljs":"^0.7.4","url-loader":"^0.5.7","vue-loader":"^10.0.0","vue-style-loader":"^1.0.0","vue-template-compiler":"^2.1.0","vueisotope":"^2.0.3","webpack":"^1.13.2","webpack-dev-middleware":"^1.8.3","webpack-hot-middleware":"^2.12.2","webpack-merge":"^0.14.1"},"engines":{"node":">= 4.0.0","npm":">= 3.0.0"},"bugs":{"url":"https://github.com/David-Desmaisons/Vue.ImagesLoaded/issues"},"license":"MIT","homepage":"https://github.com/David-Desmaisons/Vue.ImagesLoaded#readme","repository":{"type":"git","url":"git+https://github.com/David-Desmaisons/Vue.ImagesLoaded.git"},"gitHead":"97792cb429ec74ed807650eed2c78130234dc7bf","_id":"vue-images-loaded@1.1.2","_shasum":"fc4ddb7fe708251bcdf6199879571491bf583fc8","_from":".","_npmVersion":"3.10.2","_nodeVersion":"7.7.1","_npmUser":{"name":"davidesmaisons","email":"desmaisons_david@hotmail.com"},"dist":{"shasum":"fc4ddb7fe708251bcdf6199879571491bf583fc8","tarball":"https://registry.npmjs.org/vue-images-loaded/-/vue-images-loaded-1.1.2.tgz","integrity":"sha512-xZ3LtDQ/efbLQ2tiMEhPANPkgmoRQz9+oqcM9r1JXCfEiueVu8L6ZUfU0PFuGNMXyI6SGWguNZ+UZIitclOmnw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFZ4v99o27yWYJuV8NqGFWRJF1/F/THL3gTUKIVEhm57AiA0LbfHBi3Glf1fcAb+Ht6lrsMGfh4Q4oYoXVVirgEJ9g=="}]},"maintainers":[{"name":"davidesmaisons","email":"desmaisons_david@hotmail.com"}],"_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/vue-images-loaded-1.1.2.tgz_1492640074033_0.7988227163441479"},"directories":{}}},"readme":"# Vue.ImagesLoaded\n\n[![GitHub open issues](https://img.shields.io/github/issues/David-Desmaisons/Vue.ImagesLoaded.svg?maxAge=2592000)](https://github.com/David-Desmaisons/Vue.ImagesLoaded/issues?q=is%3Aopen+is%3Aissue)\n[![GitHub closed issues](https://img.shields.io/github/issues-closed/David-Desmaisons/Vue.ImagesLoaded.svg?maxAge=2592000)](https://github.com/David-Desmaisons/Vue.ImagesLoaded/issues?q=is%3Aissue+is%3Aclosed)\n[![Npm download](https://img.shields.io/npm/dt/vue-images-loaded.svg?maxAge=2592000)](https://www.npmjs.com/package/vue-images-loaded)\n[![Npm version](https://img.shields.io/npm/v/vue-images-loaded.svg?maxAge=2592000)](https://www.npmjs.com/package/vue-images-loaded)\n[![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)\n[![MIT License](https://img.shields.io/github/license/David-Desmaisons/Vue.ImagesLoaded.svg)](https://github.com/David-Desmaisons/Vue.ImagesLoaded/blob/master/LICENSE)\n\nA Vue.js 2.0 directive to detect when images have been loaded, based on [imagesLoaded](http://imagesloaded.desandro.com/)\n\nThis directive allows to get a callback when children images are loaded in a container element.<br>\nPlays nicely with [vue.isotope](https://github.com/David-Desmaisons/Vue.Isotope) to allow re-layout when images are loaded.\n\n## Demo\n\n![demo gif](vueimagesloaded.gif)\n\n\n## Typical usage\n```HTML\n<div v-images-loaded:on.progress=\"imageProgress\">\n\t<div v-for=\"element in list\">\n\t\t<img :src=\"element.src\">\n\t</div>\n</div>\n```\n\n```javascript\nimport imagesLoaded from 'vue-images-loaded'\n\nexport default {\n    directives: {\n        imagesLoaded\n    },\n    methods: {\n        imageProgress(instance, image ) {\n        const result = image.isLoaded ? 'loaded' : 'broken';\n        console.log( 'image is ' + result + ' for ' + image.img.src );\n    }\n```\n\n## Isotope Example\n```HTML\n<isotope ref=\"cpt\" :options='getOptions()' v-images-loaded:on.progress=\"layout\" :list=\"list\">\n    <div v-for=\"element in list\" :key=\"element.id\"  @click=\"selected=element\">\n        {{element.name}}\n        <br>\n        {{element.id}}\n        <img :src=\"element.src\" alt=\"Not found\">\n    </div>\n</isotope>\n```\n\n```javascript\nimport imagesLoaded from 'vue-images-loaded'\n\nexport default {\n    directives: {\n        imagesLoaded\n    },\n    methods: {\n        layout () {\n            this.$refs.cpt.layout('masonry');\n        }     \n    }\n```\n\n## API\n\n### Using directive\n- When used without argument nor modifiers:\n```HTML\n<div v-images-loaded:\"loaded\">\n```\nDirective value:<br>\n```javascript\nfunction loaded(instance){\n    //...\n}\n```\nloaded is a `Function` triggered after all images have been either loaded or confirmed broken.<br>\nFunction parameter: ImagesLoaded instance\n\n- When used with `on` argument but no modifiers:\n```HTML\n<div v-images-loaded.on:\"listener\">\n```\nDirective value:<br>\n```javascript\nlistener:{\n    done(instance){\n        //...\n    },\n    fail(instance){\n        //...\n    }\n}\n```\nlistener is an `Object` containing callback functions.<br>\nFunction should be named and will received arguments as described in [Imagesloaded](http://imagesloaded.desandro.com/) \n\n- When used with `on` argument and modifier:\n```HTML\n<div v-images-loaded.on.progress:\"callback\">\n```\nDirective value:<br>\n```javascript\nfunction callback(instance, img){\n    //...\n}\n```\ncallback is a `Function` triggered acording to modifier name `always`, `done`, `fail`, `progress`.<br>\nFunction parameter: ImagesLoaded instance, and image information for `progess` only.\n\n### ImagesLoaded instance\n\n- Properties:\n    - imagesLoaded.images<br>\n\n        `Array` of LoadingImage instances for each image detected<br>\n\n### LoadingImage instance\n\n- Property:\n    - LoadingImage.img\n\n        `Image` - The img element\n\n    - LoadingImage.isLoaded\n\n        `Boolean` - true when the image has succesfully loaded\n\n\n## Installation\n- Available through bower and npm:\n``` js\n npm install vue-images-loaded --save\n```\n``` js\n bower install vue.ImagesLoaded -save\n```\n\n- #### For Modules\n\n  ``` js\n  // ES6\n  import imagesLoaded from 'vue-images-loaded'\n  ...\n  export default {\n        directives: {\n            imagesLoaded,\n        }\n    ...\n  \n  // ES5\n  var imagesLoaded = require('vue-images-loaded')\n  ```\n\n- #### For `<script>` Include\n\n  Just include `vueimagesloaded.js` after `imagesloaded.pkgd.min.js` script.<br>\n\n","maintainers":[{"name":"davidesmaisons","email":"desmaisons_david@hotmail.com"}],"time":{"modified":"2022-06-28T19:39:49.693Z","created":"2016-12-31T23:14:19.461Z","1.0.0":"2016-12-31T23:14:19.461Z","1.0.1":"2016-12-31T23:19:11.487Z","1.1.0":"2017-01-01T22:07:50.804Z","1.1.1":"2017-01-08T03:04:16.413Z","1.1.2":"2017-04-19T22:14:35.906Z"},"author":{"name":"David Desmaisons"},"readmeFilename":"README.md","homepage":"https://github.com/David-Desmaisons/Vue.ImagesLoaded#readme","keywords":["vue","vuejs","imagesLoaded","web-components"],"repository":{"type":"git","url":"git+https://github.com/David-Desmaisons/Vue.ImagesLoaded.git"},"bugs":{"url":"https://github.com/David-Desmaisons/Vue.ImagesLoaded/issues"},"license":"MIT","users":{"appsparkler":true}}