{"id":15015945,"url":"https://github.com/topaxi/ember-img-lazy","last_synced_at":"2025-04-12T09:31:41.601Z","repository":{"id":25374541,"uuid":"103839821","full_name":"topaxi/ember-img-lazy","owner":"topaxi","description":"Lazyloaded images with Ember","archived":false,"fork":false,"pushed_at":"2022-12-10T17:13:13.000Z","size":708,"stargazers_count":11,"open_issues_count":18,"forks_count":5,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-26T04:41:27.200Z","etag":null,"topics":["ember","ember-addon","emberjs","img","img-lazyload-lib","lazy","lazy-loading"],"latest_commit_sha":null,"homepage":null,"language":"Handlebars","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/topaxi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-09-17T15:31:53.000Z","updated_at":"2024-05-30T03:14:32.000Z","dependencies_parsed_at":"2023-01-14T07:00:08.450Z","dependency_job_id":null,"html_url":"https://github.com/topaxi/ember-img-lazy","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/topaxi%2Fember-img-lazy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/topaxi%2Fember-img-lazy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/topaxi%2Fember-img-lazy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/topaxi%2Fember-img-lazy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/topaxi","download_url":"https://codeload.github.com/topaxi/ember-img-lazy/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248422884,"owners_count":21100893,"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":["ember","ember-addon","emberjs","img","img-lazyload-lib","lazy","lazy-loading"],"created_at":"2024-09-24T19:48:11.595Z","updated_at":"2025-04-12T09:31:41.239Z","avatar_url":"https://github.com/topaxi.png","language":"Handlebars","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ember-img-lazy\n\nLazily load images once they enter your viewport.\n\nUses `IntersectionObserver`, does not provide a polyfill and loads\nimages immediately if `IntersectionObserver` is not available.\n\n## Usage\n```handlebars\n{{img-lazy src=\"smile.png\" width=200 height=200 alt=\"Smile\"}}\n```\n\n`{{img-lazy}}` will add the class `img-lazy--loading` once it starts\nfetching the image source and applies the class `img-lazy--loaded` and `src`\nproperty when it finishes.\n\n## Configuration\n\n`config/environment`:\n```javascript\nmodule.exports = function(environment) {\n  let ENV = {\n    // ...\n    'ember-img-lazy': {\n      // Don't load images in fastboot, this effectively\n      // shows the placeholder image until ember takes over.\n      // Default: false\n      lazyFastBoot: true,\n\n      // The default setting is useful if one wants to show a\n      // placeholder loading img (i.e. through a background-image).\n      // Disable to not wait for the images to load to set the src url.\n      // This is mostly useful with progressive encoded images.\n      // Default: false\n      setSrcImmediately: false,\n\n      // Config passed to IntersectionObserver.\n      observerConfig: {\n        rootMargin: '50px 0px',\n        threshold: 0.01\n      }\n    }\n  }\n  // ...\n}\n```\n\n## FadeIn Example\n\n```css\n@keyframes fade-in {\n  to {\n    opacity: 1;\n  }\n}\n\n.img-lazy {\n  opacity: 0;\n}\n.img-lazy--loaded {\n  animation: 200ms fade-in forwards;\n  background: none;\n}\n```\n\nOr with placeholder style, flickers if `immediately` is set (default `false`).\n\n```css\n@keyframes fade-in {\n  to {\n    opacity: 1;\n  }\n}\n\n.img-lazy {\n  opacity: 0;\n}\n.img-lazy--loading {\n  opacity: 1;\n  background: rgba(238, 238, 236, 0.8);\n}\n.img-lazy--loaded {\n  animation: 200ms fade-in forwards;\n}\n```\n\n\n## Installation\n\n* `ember install ember-img-lazy`\n\n## Running\n\n* `ember serve`\n* Visit your app at [http://localhost:4200](http://localhost:4200).\n\n## Running Tests\n\n* `npm test` (Runs `ember try:each` to test your addon against multiple Ember versions)\n* `ember test`\n* `ember test --server`\n\n## Building\n\n* `ember build`\n\nFor more information on using ember-cli, visit [https://ember-cli.com/](https://ember-cli.com/).\n\nSee the [Contributing](CONTRIBUTING.md) guide for details.\n\n\nLicense\n------------------------------------------------------------------------------\n\nThis project is licensed under the [MIT License](LICENSE.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftopaxi%2Fember-img-lazy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftopaxi%2Fember-img-lazy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftopaxi%2Fember-img-lazy/lists"}