An Angular library that lazy load images with IntersectionObserver API
- Smart lazy loading logic using IntersectionObserver
- The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document’s viewport. -MDN
- Speed up initial page loads by loading only images above the fold
- Decreases load time
- Decreases speed index
- Decrease above the fold time
- Responsive with placeholders
- First install through npm:
npm install --save ngx-lazy-loading-images
- Import the ngx-lazy-loading-images module into your apps module:
- Add NgxLazyLoadingImagesComponent to your view:
What is it? - Angular component that lazy loads images with IntersectionObserver
Intersection observer options
The options object passed into the
[config] input object is passed into the
IntersectionObserver() constructor and lets you control the circumstances under which the observer's callback is invoked. It has the following fields:
- 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.
- 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.
- 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 to 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.
Image component working similar with standard
img tag and with the following props.
||string||✓||The image source. eg: 'https://via.placeholder.com/300x300'|
||number||Image height (Defaults to img src height)|
||number||Image width (Defaults to img src width)|
||string||This attribute defines an alternative text description of the image.|
||string||Placeholder until image loads. A CSS
- Clone repo
- Install dependencies:
Building the Library
- Before we can use ng-surveys library we need to build it:
ng build ng-surveys
- With Angular CLI v6.2 we can use the --watch flag so that every time a file changes Angular CLI performs a partial build that emits the amended files:
ng build ng-surveys --watch || npm run start:lib
- Run the application project (demo app to test our library):
ng serve || npm run start
- Navigate to
http://localhost:4200/. The app will automatically reload if you change any of the source files.
ng generate component component-name to generate a new component. You can also use
ng generate directive|pipe|service|class|guard|interface|enum|module.
ng build to build the project. The build artifacts will be stored in the
dist/ directory. Use the
--prod flag for a production build.
Running unit tests
ng test to execute the unit tests via Karma.
Running end-to-end tests
ng e2e to execute the end-to-end tests via Protractor.
To get more help on the Angular CLI use
ng help or go check out the Angular CLI README.