{"id":13536218,"url":"https://github.com/David-Desmaisons/Vue.ImagesLoaded","last_synced_at":"2025-04-02T02:32:48.623Z","repository":{"id":48951114,"uuid":"77718675","full_name":"David-Desmaisons/Vue.ImagesLoaded","owner":"David-Desmaisons","description":"Vue.js 2.0 directive to detect images loading","archived":false,"fork":false,"pushed_at":"2021-07-03T22:35:29.000Z","size":3236,"stargazers_count":145,"open_issues_count":6,"forks_count":22,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-12T09:04:15.203Z","etag":null,"topics":["directive","imagesloaded","vue2"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/David-Desmaisons.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-12-31T01:04:53.000Z","updated_at":"2024-08-04T12:46:48.000Z","dependencies_parsed_at":"2022-08-30T09:41:12.300Z","dependency_job_id":null,"html_url":"https://github.com/David-Desmaisons/Vue.ImagesLoaded","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/David-Desmaisons%2FVue.ImagesLoaded","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/David-Desmaisons%2FVue.ImagesLoaded/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/David-Desmaisons%2FVue.ImagesLoaded/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/David-Desmaisons%2FVue.ImagesLoaded/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/David-Desmaisons","download_url":"https://codeload.github.com/David-Desmaisons/Vue.ImagesLoaded/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222795273,"owners_count":17038797,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["directive","imagesloaded","vue2"],"created_at":"2024-08-01T09:00:36.041Z","updated_at":"2024-11-03T01:30:48.355Z","avatar_url":"https://github.com/David-Desmaisons.png","language":"JavaScript","funding_links":[],"categories":["实用库","Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","UI实用程序","Components \u0026 Libraries","UI Utilities","UI Utilities [🔝](#readme)"],"sub_categories":["Libraries \u0026 Plugins","杂","UI Utilities","Miscellaneous"],"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.\u003cbr\u003e\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\u003cdiv v-images-loaded:on.progress=\"imageProgress\"\u003e\n\t\u003cdiv v-for=\"element in list\"\u003e\n\t\t\u003cimg :src=\"element.src\"\u003e\n\t\u003c/div\u003e\n\u003c/div\u003e\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\u003cisotope ref=\"cpt\" :options='getOptions()' v-images-loaded:on.progress=\"layout\" :list=\"list\"\u003e\n    \u003cdiv v-for=\"element in list\" :key=\"element.id\"  @click=\"selected=element\"\u003e\n        {{element.name}}\n        \u003cbr\u003e\n        {{element.id}}\n        \u003cimg :src=\"element.src\" alt=\"Not found\"\u003e\n    \u003c/div\u003e\n\u003c/isotope\u003e\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\u003cdiv v-images-loaded:\"loaded\"\u003e\n```\nDirective value:\u003cbr\u003e\n```javascript\nfunction loaded(instance){\n    //...\n}\n```\nloaded is a `Function` triggered after all images have been either loaded or confirmed broken.\u003cbr\u003e\nFunction parameter: ImagesLoaded instance\n\n- When used with `on` argument but no modifiers:\n```HTML\n\u003cdiv v-images-loaded.on:\"listener\"\u003e\n```\nDirective value:\u003cbr\u003e\n```javascript\nlistener:{\n    done(instance){\n        //...\n    },\n    fail(instance){\n        //...\n    }\n}\n```\nlistener is an `Object` containing callback functions.\u003cbr\u003e\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\u003cdiv v-images-loaded.on.progress:\"callback\"\u003e\n```\nDirective value:\u003cbr\u003e\n```javascript\nfunction callback(instance, img){\n    //...\n}\n```\ncallback is a `Function` triggered acording to modifier name `always`, `done`, `fail`, `progress`.\u003cbr\u003e\nFunction parameter: ImagesLoaded instance, and image information for `progess` only.\n\n### ImagesLoaded instance\n\n- Properties:\n    - imagesLoaded.images\u003cbr\u003e\n\n        `Array` of LoadingImage instances for each image detected\u003cbr\u003e\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 `\u003cscript\u003e` Include\n\n  Just include `vueimagesloaded.js` after `imagesloaded.pkgd.min.js` script.\u003cbr\u003e\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDavid-Desmaisons%2FVue.ImagesLoaded","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FDavid-Desmaisons%2FVue.ImagesLoaded","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDavid-Desmaisons%2FVue.ImagesLoaded/lists"}