{"_id":"@doughlass/ngx-lazy-load-images","name":"@doughlass/ngx-lazy-load-images","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@doughlass/ngx-lazy-load-images","version":"1.0.0","description":"Image lazy load library for Angular 15+.","author":{"name":"doughlass"},"keywords":["lazy-loading","angular","angular2","angular4","intersection-observer","mutationobserver","lazy-load","lazy load","images"],"license":"MIT","repository":{"type":"git","url":"git+https://github.com/doughlass/ngx-lazy-load-images.git"},"peerDependencies":{"@angular/common":"^15.0.3","@angular/core":"^15.0.3","intersection-observer":"^0.12.0","tslib":"^2.4.1"},"gitHead":"531eb896d2c8865a2c39e88c806400ce5dbf1d87","bugs":{"url":"https://github.com/doughlass/ngx-lazy-load-images/issues"},"homepage":"https://github.com/doughlass/ngx-lazy-load-images#readme","_id":"@doughlass/ngx-lazy-load-images@1.0.0","_nodeVersion":"18.12.1","_npmVersion":"9.1.2","dist":{"integrity":"sha512-usZHzZmtRiR6WxOGgWQ9Hx6wXGqUIDRwOxa14VDFny8+NlU0tVZDGz2/hBjl81QZHOIrIaauCaa1I3Z0BboikQ==","shasum":"d984bf8ac34ccce3ea0b0e43e768c5bb98b948ae","tarball":"https://registry.npmjs.org/@doughlass/ngx-lazy-load-images/-/ngx-lazy-load-images-1.0.0.tgz","fileCount":10,"unpackedSize":12047,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC9dMbs+apI1l6BXdeNi0jP6QLWkSNbUuw0JJOgbSMFogIgUdU1bZU6bgaaAph0ZLcGHpkUwe9bVoXLDRm9DbQQd6k="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjlfJrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo5jw/+M5/PgukEYed2pjwwbT9pnNqs3HECyVipu/fxWx/RB7OUKVz9\r\nJfyBq2NCdJWnR7aegNnYB57jyQIQ6uFrSgkXVj/hknPO4ngHuliebEuqYXV7\r\nUM/5pb/z8RpKwwJrvoCz0/+qayOPlKgO+QY16xh3E0xvFsElZ42DrYPCYpVx\r\nYKgbKS3UtSsCgG2/r7t6mp5Xd34R/A4XRJkZNaYv9oihA2f/xZErmyNBjYdF\r\n9LVboMsa6VKt3AcskeVA0o8MAIuoMFhLVz2qZxWFaZLcl9Pb75DMXVnTHA8k\r\n9H9nqSWtz1sa7xKwN2m05hEs7J3vY3YQi10aN/taJT0VhHw3OPwhSG3N+6bM\r\nDOimrnAXWvKxEpEvxHktTKYH3P2PrQsC3ijM9WYZT1Suy6Rwarj4gbAMvXUd\r\ng8lTdRD+qaQs+ApN+XgWhi+wLotE3ScVJ6TP4LbjjQUs9get1jvpbZ+8Npjb\r\nYZcs4nYYSUzUW7UR24BVyGusUeXTooj8EgFwdSDaEvSHhTfSgalcNgzcRtrB\r\nHanAJd/eDyJUzzYLjTf24eEGw6FdZvjp7EYmHYtIpghmUCjqK8BKe8lA1TXB\r\nMV7NOxjI3Sb0YdWN9p1MmWbU1N2Y+AawKnGiXeDbPtWsJvJsaj0gW+PWQKDI\r\nPruk5HQmeI6zuxSDbv+I8dOLjsWcjP8niq0=\r\n=MmHH\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"doughlass","email":"doughlass.npm@gmail.com"},"directories":{},"maintainers":[{"name":"doughlass","email":"doughlass.npm@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-lazy-load-images_1.0.0_1670771307133_0.2695092804314203"},"_hasShrinkwrap":false}},"time":{"created":"2022-12-11T15:08:27.072Z","1.0.0":"2022-12-11T15:08:27.290Z","modified":"2022-12-11T15:08:27.441Z"},"maintainers":[{"name":"doughlass","email":"doughlass.npm@gmail.com"}],"description":"Image lazy load library for Angular 15+.","homepage":"https://github.com/doughlass/ngx-lazy-load-images#readme","keywords":["lazy-loading","angular","angular2","angular4","intersection-observer","mutationobserver","lazy-load","lazy load","images"],"repository":{"type":"git","url":"git+https://github.com/doughlass/ngx-lazy-load-images.git"},"author":{"name":"doughlass"},"bugs":{"url":"https://github.com/doughlass/ngx-lazy-load-images/issues"},"license":"MIT","readme":"# ngx-lazy-load-images\n[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bhttps%3A%2F%2Fgithub.com%2Fjesusbotella%2Fngx-lazy-load-images.svg?type=shield)](https://app.fossa.io/projects/git%2Bhttps%3A%2F%2Fgithub.com%2Fjesusbotella%2Fngx-lazy-load-images?ref=badge_shield)\n\n\nngx-lazy-load-images is a image lazy load library for Angular 2+.\n\nThe library allows to lazy load images from your web application using the [MutationObserver](https://developer.mozilla.org/en/docs/Web/API/MutationObserver) and the [IntersectionObserver](https://developer.mozilla.org/en/docs/Web/API/IntersectionObserver). Images will be loaded as soon as they enter the viewport in a non-blocking way.\n\nIt supports `<img>` tags as well as background images.\n\n\n## Installation\nYou can install the library via npm with this command:\n```\nnpm install ngx-lazy-load-images --save\n```\n\n\n## Usage\n\n### 1. Import the `LazyLoadImagesModule`\n\nImport `LazyLoadImagesModule` from the `ngx-lazy-load-images` package, and add it to the `NgModule` imports array of your component.\n\n```typescript\nimport { NgModule } from '@angular/core';\nimport { LazyLoadImagesModule } from 'ngx-lazy-load-images';\n\n@NgModule({\n  imports: [\n    LazyLoadImagesModule\n  ]\n})\nexport class AppComponent {}\n```\n\n### 2. Use the `lazy-load-images` directive\n\nAdd the `lazy-load-images` directive to the tag containing all the DOM image nodes to lazy load:\n\n```html\n<!-- Image tags -->\n<div class=\"image-list\" lazy-load-images>\n  <img *ngFor=\"let imageUrl in images\" [attr.data-src]=\"imageUrl\">\n</div>\n\n<!-- Background images -->\n<div class=\"image-list\" lazy-load-images>\n  <div *ngFor=\"let imageUrl in images\" [attr.data-background-src]=\"imageUrl\"></div>\n</div>\n```\n\nThe container can have any HTML or components inside along with the images. But the less nodes inside the directive, the faster it will be.\n\n**Intersection Observer Configuration**\n\nIf you want to make some configuration changes to the Intersection Observer, you can do it by passing an object to the `lazy-load-images` directive. The object takes the [Intersection Observer configuration parameters](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options) as keys.\n\n  ```html\n  <div class=\"image-list\" [lazy-load-images]=\"{ rootMargin: '50px' }\"></div>\n  ```\n\n### 3. Set the `data-src` or `data-background-src` attribute\n\nSet the `data-src` or `data-background-src` attribute in the images or tags that you want to lazy load.\n\nThe `data-src` attribute allows to lazy load images inside `<img>` tags. You can define it by passing a variable to the attribute, interpolating a variable, or inserting the URL directly:\n\n```html\n<img [attr.data-src]=\"imageUrlVariable\">\n<img attr.data-src=\"{{ imageUrlVariable }}\">\n<img data-src=\"https://example.com/cute_kitten.jpg\">\n```\n\nThe `data-background-src` attribute lazy loads background images inside any HTML tag. It works the same way as the `data-src` attribute:\n\n```html\n<div [attr.data-background-src]=\"imageUrlVariable\"></div>\n<div attr.data-background-src=\"{{ imageUrlVariable }}\"></div>\n<div data-background-src=\"https://example.com/cute_kitten.jpg\"></div>\n```\n\n### 4. Have fun  🎉\n\n## Performance\n\n- Will this module make my web application worse in terms of performance?\n  - This module will make your app better in terms of overall and render performance, especially if it has a lot of images to show when the page is loaded. The images will be downloaded as soon as they appear in the viewport instead of all together. That means that your users will save network transfer data and the scroll will be less laggy.\n\n- What happens if I have lots of images, will it consume too much memory?\n  - The lifespan of the image observers is too short. It will only last until [the URL is set to the proper attribute, and destroyed right after that](https://github.com/jesusbotella/ngx-lazy-load-images/blob/master/src/lib/src/ngx-lazy-load-images.directive.ts#L82). And if the directive is destroyed, [all the remaining image observers and the intersection observer instance will be disconnected](https://github.com/jesusbotella/ngx-lazy-load-images/blob/master/src/lib/src/ngx-lazy-load-images.directive.ts#L38).\n\n\n## Browser Compatibility\n\nThis library has been tested and known to work in the latest version of all major browsers.\n\nThe [WICG Intersection Observer Polyfill](https://github.com/WICG/IntersectionObserver/tree/gh-pages/polyfill) is bundled within the module to use the Intersection Observer API in the non-compatible browsers. Avoid importing it in your application too, as it may cause unexpected issues.\n\nHowever, the compatibility with older browsers is limited by the [`Mutation Observer` support](https://caniuse.com/#feat=mutationobserver), which is known to work in:\n\n<table>\n  <tr>\n    <td align=\"center\">\n      <img src=\"https://raw.github.com/alrra/browser-logos/39.2.2/src/chrome/chrome_48x48.png\" alt=\"Chrome\"><br>\n      26+\n    </td>\n    <td align=\"center\">\n      <img src=\"https://raw.github.com/alrra/browser-logos/39.2.2/src/firefox/firefox_48x48.png\" alt=\"Firefox\"><br>\n      14+\n    </td>\n    <td align=\"center\">\n      <img src=\"https://raw.github.com/alrra/browser-logos/39.2.2/src/safari/safari_48x48.png\" alt=\"Safari\"><br>\n      6+\n    </td>\n    <td align=\"center\">\n      <img src=\"https://raw.github.com/alrra/browser-logos/39.2.2/src/edge/edge_48x48.png\" alt=\"Edge\"><br>\n      ✔\n    </td>\n    <td align=\"center\">\n      <img src=\"https://raw.github.com/alrra/browser-logos/39.2.2/src/archive/internet-explorer_7-8/internet-explorer_7-8_48x48.png\" alt=\"Internet Explorer\"><br>\n    11+\n    </td>\n    <td align=\"center\">\n      <img src=\"https://raw.github.com/alrra/browser-logos/39.2.2/src/opera/opera_48x48.png\" alt=\"Opera\"><br>\n      15+\n    </td>\n    <td align=\"center\">\n      <img src=\"https://raw.github.com/alrra/browser-logos/39.2.2/src/android/android_48x48.png\" alt=\"Android\"><br>\n      4.4+\n    </td>\n  </tr>\n</table>\n\n## License\n\nMIT\n\n\n[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bhttps%3A%2F%2Fgithub.com%2Fjesusbotella%2Fngx-lazy-load-images.svg?type=large)](https://app.fossa.io/projects/git%2Bhttps%3A%2F%2Fgithub.com%2Fjesusbotella%2Fngx-lazy-load-images?ref=badge_large)\n","readmeFilename":"README.md"}