рд╣реИрд▓реЛ, рдЫрд╡рд┐ рд▓реЛрдб рд╣реЛрдиреЗ рдкрд░ рдЕрдзрд┐рд╕реВрдЪрдирд╛ рдкреНрд░рд╛рдкреНрдд рдХрд░рдиреЗ рдХреЗ рд╡рд┐рдХрд▓реНрдк рдХреЛ рд▓рд╛рдЧреВ рдХрд░рдиреЗ рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рдХреНрдпрд╛? рдпрд╣ рдХрдИ рдорд╛рдорд▓реЛрдВ рдореЗрдВ рдмрд╣реБрдд рдЙрдкрдпреЛрдЧреА рд╣реЛрдЧрд╛ред
рдореИрдВ рдЙрдкрдпреЛрдЧ рдХреЗ рдЗрд╕ рдЙрджрд╛рд╣рд░рдг рдХрд╛ рд╕реБрдЭрд╛рд╡ рджреЗрддрд╛ рд╣реВрдВ:
@Component({
selector: 'image',
template: `
<div [hidden]="isLoading">
<img
[defaultImage]="defaultImage"
[lazyLoad]="image"
[offset]="offset"
(onLoad)="onImageLoad()" />
</div>
<div *ngIf="isLoading">
<loader></loader>
</div>
`
})
class ImageComponent {
defaultImage = 'https://www.placecage.com/1000/1000';
image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg';
offset = 100;
isLoading = true;
onImageLoad() {
this.isLoading = false;
}
}
рдЕрдЧрд░ рд╡рд┐рдЪрд╛рд░ рдЕрдЪреНрдЫрд╛ рд╣реИ, рддреЛ рдореИрдВ рдЬрд░реВрд░рдд рдкрдбрд╝рдиреЗ рдкрд░ рдкреБрд▓ рдЕрдиреБрд░реЛрдз рдХрд░ рд╕рдХрддрд╛ рд╣реВрдВред
рдирдорд╕реНрддреЗ,
рдореИрдВ рдЗрд╕ рдмрд╛рд░реЗ рдореЗрдВ рд╕реЛрдЪ рд░рд╣рд╛ рд╣реВрдВ рдФрд░ рдореИрдВ рдХреБрдЫ рдЙрдкрдпреЛрдЧ рдХреЗ рдорд╛рдорд▓реЗ рджреЗрдЦ рд╕рдХрддрд╛ рд╣реВрдВред рдореИрдВ рдЦрд╝реБрд╢реА рд╕реЗ рдкреБрд▓ рдЕрдиреБрд░реЛрдз рд╕реНрд╡реАрдХрд╛рд░ рдХрд░рддрд╛ рд╣реВрдБ :)ред рдЗрд╕реЗ рд▓рд╛рдЧреВ рдХрд░рдирд╛ рдХрд╛рдлреА рдЖрд╕рд╛рди рд╣реЛрдирд╛ рдЪрд╛рд╣рд┐рдП рдХреНрдпреЛрдВрдХрд┐ рдЫрд╡рд┐ рд▓реЛрдб рд╣реЛрдиреЗ рдкрд░ рдпрд╣ рдкрд░реНрдпрд╡реЗрдХреНрд╖рдХ рдЙрддреНрд╕рд░реНрдЬрд┐рдд рд╣реЛ рдЬрд╛рддрд╛ рд╣реИ: https://github.com/tjoskar/ng-lazyload-image/blob/master/src/lazyload-image.directive.ts#L37
рдпрд╣ рднреА рдЪрд╛рд╣рд┐рдП! рдЯрд┐рдкреНрдкрдгреА рднреА рдХрд░ рд░рд╣рд╛ рд╣реВрдВ рдЗрд╕рд▓рд┐рдП рдореБрдЭреЗ рдкрддрд╛ рд╣реИ рдХрд┐ рдпрд╣ рдХрдм рд╡рд┐рд▓рдп рд╣реБрдЖ рд╣реИред
#177 . рдореЗрдВ рдлрд┐рдХреНрд╕реНрдб
3.2.0 . рдореЗрдВ рд╢рд╛рдорд┐рд▓
рдзрдиреНрдпрд╡рд╛рдж @ рд░рд┐рдорд▓рд┐рди
рд╕рдмрд╕реЗ рдЙрдкрдпреЛрдЧреА рдЯрд┐рдкреНрдкрдгреА
рдирдорд╕реНрддреЗ,
рдореИрдВ рдЗрд╕ рдмрд╛рд░реЗ рдореЗрдВ рд╕реЛрдЪ рд░рд╣рд╛ рд╣реВрдВ рдФрд░ рдореИрдВ рдХреБрдЫ рдЙрдкрдпреЛрдЧ рдХреЗ рдорд╛рдорд▓реЗ рджреЗрдЦ рд╕рдХрддрд╛ рд╣реВрдВред рдореИрдВ рдЦрд╝реБрд╢реА рд╕реЗ рдкреБрд▓ рдЕрдиреБрд░реЛрдз рд╕реНрд╡реАрдХрд╛рд░ рдХрд░рддрд╛ рд╣реВрдБ :)ред рдЗрд╕реЗ рд▓рд╛рдЧреВ рдХрд░рдирд╛ рдХрд╛рдлреА рдЖрд╕рд╛рди рд╣реЛрдирд╛ рдЪрд╛рд╣рд┐рдП рдХреНрдпреЛрдВрдХрд┐ рдЫрд╡рд┐ рд▓реЛрдб рд╣реЛрдиреЗ рдкрд░ рдпрд╣ рдкрд░реНрдпрд╡реЗрдХреНрд╖рдХ рдЙрддреНрд╕рд░реНрдЬрд┐рдд рд╣реЛ рдЬрд╛рддрд╛ рд╣реИ: https://github.com/tjoskar/ng-lazyload-image/blob/master/src/lazyload-image.directive.ts#L37