{"id":13601987,"url":"https://github.com/maxisam/ngx-progressive-image-loader","last_synced_at":"2025-10-28T15:30:27.876Z","repository":{"id":32861711,"uuid":"144568918","full_name":"maxisam/ngx-progressive-image-loader","owner":"maxisam","description":"lazy load img/picture, prevent reflow and seo friendly.","archived":false,"fork":false,"pushed_at":"2023-01-07T03:56:36.000Z","size":14730,"stargazers_count":35,"open_issues_count":33,"forks_count":6,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-08T07:35:35.853Z","etag":null,"topics":["angular","image-lazy-load","lazyload","lazyload-images","progressive-image"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/maxisam.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":"2018-08-13T11:12:34.000Z","updated_at":"2021-04-26T15:45:09.000Z","dependencies_parsed_at":"2023-01-14T22:31:01.111Z","dependency_job_id":null,"html_url":"https://github.com/maxisam/ngx-progressive-image-loader","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxisam%2Fngx-progressive-image-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxisam%2Fngx-progressive-image-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxisam%2Fngx-progressive-image-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxisam%2Fngx-progressive-image-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maxisam","download_url":"https://codeload.github.com/maxisam/ngx-progressive-image-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238667921,"owners_count":19510495,"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":["angular","image-lazy-load","lazyload","lazyload-images","progressive-image"],"created_at":"2024-08-01T18:01:11.165Z","updated_at":"2025-10-28T15:30:22.070Z","avatar_url":"https://github.com/maxisam.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"[![Build Status](https://travis-ci.org/maxisam/ngx-progressive-image-loader.svg?branch=master)](https://travis-ci.org/maxisam/ngx-progressive-image-loader)\n[![npm](https://img.shields.io/npm/dt/ngx-progressive-image-loader.svg?style=flat-square)](https://www.npmjs.com/package/ngx-progressive-image-loader)\n[![GitHub release](https://img.shields.io/github/release/maxisam/ngx-progressive-image-loader.svg?style=flat-square)](https://github.com/maxisam/ngx-progressive-image-loader/releases)\n[![npm](https://img.shields.io/npm/l/ngx-progressive-image-loader.svg?style=flat-square)]()\n\n# ngx-progressive-image-loader\n\nSupport Angular \u003e=6.0.0\n\n## Demo\n\n[stackblitz.com](https://stackblitz.com/github/maxisam/ngx-progressive-image-loader)\n\n## Features\n\n- No other JS dependency. Just Angular\n\n- Use **IntersectionObserver** to determine the timing to load the image\n\n- Support image and picture\n\n- Preserve space to avoid dom reflow\n\n- Show small default loading image with fading transition\n\n- Load image directly for spider (SEO friendly) or non-supported browsers\n\n- Aggressive Loading. Able to continue to load even if images haven't got intersected when the concurrently loading count is lower than a certain value. (_after 4.0.0_)\n\n## Install\n\n```bat\nnpm install ngx-progressive-image-loader --save\n```\n\nOpen your module file e.g `app.module.ts` and update **imports** array\n\n```ts\nimport { NgxProgressiveImageLoaderModule, IImageLoaderOptions } from 'ngx-progressive-image-loader';\n...\nimports: [\n...\n     NgxProgressiveImageLoaderModule.forRoot(\u003cIImageLoaderOptions\u003e{\n      // rootMargin must be specified in pixels or percent\n      rootMargin: '30px',\n      threshold: 0.1,\n      // css filter\n      filter: 'blur(3px) drop-shadow(0 0 0.75rem crimson)',\n      // image width / height ratio for image holder\n      imageRatio: 16 / 9,\n      // loading image in placeholder. Can be URL or base64\n      placeholderImageSrc:\n        // tslint:disable-next-line:max-line-length\n        'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICA8cGF0aCBmaWxsPSIjZGQwMDMxIiBkPSJNMTI1IDMwTDMxLjkgNjMuMmwxNC4yIDEyMy4xTDEyNSAyMzBsNzguOS00My43IDE0LjItMTIzLjF6Ii8+CiAgPHBhdGggZmlsbD0iI2MzMDAyZiIgZD0iTTEyNSAzMHYyMi4yLS4xVjIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMUwxMjUgMzB6Ii8+CiAgPHBhdGggZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiBmaWxsPSIjZmZmIi8+Cjwvc3ZnPgo='\n    })\n...\n]\n```\n\nAdd style to your global scss\n\n```scss\n@import '~ngx-progressive-image-loader/ngx-progressive-image-loader';\n\n$scale: 0.5; // the scale of loading image in place holder\n$transition: opacity 1s linear; // the transition of loading image in place holder, you could try: opacity .3s ease\n@include progressive-image-loader($scale, $transition);\n```\n\n## Usage\n\n- with img\n\n```html\n\u003cngx-progressive-image-loader\u003e\n  \u003cngx-image-placeholder\u003e\n    \u003c!-- ngx-image-placeholder is optional --\u003e\n    \u003cimg [src]=\"'/assets/Avengers1.jpg'\" alt=\"\" ngxProgressiveImage /\u003e\n  \u003c/ngx-image-placeholder\u003e\n  \u003cimg src=\"/assets/Avengers2.jpg\" alt=\"\" ngxProgressiveImage /\u003e\n\u003c/ngx-progressive-image-loader\u003e\n```\n\n- with img + srcset\n\n```html\n\u003cngx-progressive-image-loader\u003e\n  \u003cimg\n    [src]=\"'/assets/Avengers6.jpg'\"\n    [srcset]=\"'/assets/Avengers6.jpg 800w,/assets/Avengers7.jpg 1366w'\"\n    size=\"(max-width: 1000px) 100vw, 100vw\"\n    ngxProgressiveImage\n  /\u003e\n\u003c/ngx-progressive-image-loader\u003e\n```\n\n- with picture element\n\n```html\n\u003cngx-progressive-image-loader\u003e\n  \u003cpicture ngxProgressiveImage\u003e\n    \u003csource [srcset]=\"'/assets/Avengers4.jpg'\" media=\"(max-width: 1000px)\" /\u003e\n    \u003csource [srcset]=\"'/assets/Avengers5.jpg'\" media=\"(min-width: 1000px)\" /\u003e\n    \u003cimg [src]=\"'/assets/Avengers4.jpg'\" alt=\"My default image\" /\u003e\n  \u003c/picture\u003e\n\u003c/ngx-progressive-image-loader\u003e\n```\n\n## Configuration for IImageLoaderOptions\n\n[Intersection_observer_options](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options)\n\n- root\n  The element that is used as the viewport for checking visiblity of the target. Must be the ancestor of the target. Defaults to the browser viewport if not specified or if null.\n\n- rootMargin\n\n  Margin around the root. Can have values similar to the CSS margin property, e.g. \"10px 20px 30px 40px\" (top, right, bottom, left). The values can be percentages. This set of values serves to grow or shrink each side of the root element's bounding box before computing intersections. Defaults to all zeros.\n\n- threshold\n\n  Either a single number or an array of numbers which indicate at what percentage of the target's visibility the observer's callback should be executed. If you only want to detect when visibility passes the 50% mark, you can use a value of 0.5. If you want the callback run every time visibility passes another 25%, you would specify the array [0, 0.25, 0.5, 0.75, 1]. The default is 0 (meaning as soon as even one pixel is visible, the callback will be run). A value of 1.0 means that the threshold isn't considered passed until every pixel is visible.\n\n- filter\n\n  If you want to set more [filter](https://developer.mozilla.org/en-US/docs/Web/CSS/filter). It uses the input string as css filter.\n\n- placeholderImageSrc\n\n  src for loading image. It works just like src, takes base64 or url.\n\n- imageRatio\n\n  image width / height\n\nFor `ngx-image-placeholder` component, it takes\n\n- imageRatio\n\n- placeholderImageSrc\n\n(_after 3.0.0_, you can set imageRatio and placeholderImageSrc directly on `ngxProgressiveImage` and spare ngx-image-placeholder layer)\n\nFor `ngx-progressive-image-loader` component, it takes\n\n- imageRatio\n\n- placeholderImageSrc\n\n- filter\n\n- isAggressiveLoading: boolean; default to `true`; Set to `true` to enable **Aggressive Loading** feature. (_after 4.0.0_)\n\n- concurrentLoading: number; default t0 4; Decided at least how many concurrent loading when **Aggressive Loading** is enabled\n\nFor `ngxProgressiveImage` directive, (only for image or source elements)\n\n- imageRatio\n\n- placeholderImageSrc\n\n- noPlaceholder: boolean; default to `false`, set to `true` will skip image placeholder\n\n## Build project\n\n```bat\nnpm i\n\nnpm run build\n```\n\nTo run demo code locally\n\n`npm run start`\n\n## Browser Compatibility\n\nBrowsers don't support Intersection Observer API will not work as expect. It will load images like old time.\n\nUse [pollyfill](https://github.com/w3c/IntersectionObserver/tree/master/polyfill) like below might make it work.\n\n```html\n\u003cscript src=\"https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver\"\u003e\u003c/script\u003e\n```\n\n## Contributing\n\n- Your commits conform to the conventions established [here](https://github.com/conventional-changelog/conventional-changelog-angular/blob/master/convention.md)\n\n## Troubleshooting\n\nPlease ask your general questions at https://stackoverflow.com\n\n## Shoutouts 🙏\n\nThis project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 6.2.0 beta 02.\n\nKudos to the following authors:\n\nhttps://deanhume.com/lazy-loading-images-using-intersection-observer/\n\nhttps://www.voorhoede.nl/en/blog/say-no-to-image-reflow/\n\nhttps://jmperezperez.com/medium-image-progressive-loading-placeholder/\n\nhttps://github.com/verlok/lazyload for detecting spider\n\nAnd my wife and my child to let me work on a weekend for this.\n\n\u003cimg src=\"https://www.browserstack.com/images/layout/browserstack-logo-600x315.png\" height=\"80\" title=\"BrowserStack Logo\" alt=\"BrowserStack Logo\" /\u003e\n\nBig thanks to [BrowserStack](https://www.browserstack.com) for letting the maintainers use their service to debug browser issues.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaxisam%2Fngx-progressive-image-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaxisam%2Fngx-progressive-image-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaxisam%2Fngx-progressive-image-loader/lists"}