Angular 2: Lazy-loading images using bLazy.js
The trick was wrapping bLazy initialization inside a
setTimeout() which seems to be the only way for bLazy to properly set itself up.
Here’s the code:
How to use it?
There’s an example in the directive documentation itself but here it is:
<div id="blazyContainer" [bLazyLoadImages]="images" [bLazyOffset]="300" style="overflow: scroll;"> <div *ngFor="let image of images"> <img class="b-lazy" src="placeholder.jpg" [attr.data-src]="image" /> </div> </div>
The sample assumes blazy.js is included in your application bundle.
If you’re using Webpack, only two steps are required:
- Install blazy with NPM:
npm install --save blazy
- In your Typescript custom typings definitions file, add the line
declare module "blazy"