Ng-lazyload-image: рдЫрд╡рд┐ рд▓реЛрдб рд╣реЛрдиреЗ рдкрд░ рдХреЙрд▓рдмреИрдХ

рдХреЛ рдирд┐рд░реНрдорд┐рдд 18 рдЬреБрд▓ре░ 2017  ┬╖  5рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ  ┬╖  рд╕реНрд░реЛрдд: tjoskar/ng-lazyload-image

рд╣реИрд▓реЛ, рдЫрд╡рд┐ рд▓реЛрдб рд╣реЛрдиреЗ рдкрд░ рдЕрдзрд┐рд╕реВрдЪрдирд╛ рдкреНрд░рд╛рдкреНрдд рдХрд░рдиреЗ рдХреЗ рд╡рд┐рдХрд▓реНрдк рдХреЛ рд▓рд╛рдЧреВ рдХрд░рдиреЗ рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рдХреНрдпрд╛? рдпрд╣ рдХрдИ рдорд╛рдорд▓реЛрдВ рдореЗрдВ рдмрд╣реБрдд рдЙрдкрдпреЛрдЧреА рд╣реЛрдЧрд╛ред
рдореИрдВ рдЙрдкрдпреЛрдЧ рдХреЗ рдЗрд╕ рдЙрджрд╛рд╣рд░рдг рдХрд╛ рд╕реБрдЭрд╛рд╡ рджреЗрддрд╛ рд╣реВрдВ:

@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

рд╕рднреА 5 рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

рдирдорд╕реНрддреЗ,
рдореИрдВ рдЗрд╕ рдмрд╛рд░реЗ рдореЗрдВ рд╕реЛрдЪ рд░рд╣рд╛ рд╣реВрдВ рдФрд░ рдореИрдВ рдХреБрдЫ рдЙрдкрдпреЛрдЧ рдХреЗ рдорд╛рдорд▓реЗ рджреЗрдЦ рд╕рдХрддрд╛ рд╣реВрдВред рдореИрдВ рдЦрд╝реБрд╢реА рд╕реЗ рдкреБрд▓ рдЕрдиреБрд░реЛрдз рд╕реНрд╡реАрдХрд╛рд░ рдХрд░рддрд╛ рд╣реВрдБ :)ред рдЗрд╕реЗ рд▓рд╛рдЧреВ рдХрд░рдирд╛ рдХрд╛рдлреА рдЖрд╕рд╛рди рд╣реЛрдирд╛ рдЪрд╛рд╣рд┐рдП рдХреНрдпреЛрдВрдХрд┐ рдЫрд╡рд┐ рд▓реЛрдб рд╣реЛрдиреЗ рдкрд░ рдпрд╣ рдкрд░реНрдпрд╡реЗрдХреНрд╖рдХ рдЙрддреНрд╕рд░реНрдЬрд┐рдд рд╣реЛ рдЬрд╛рддрд╛ рд╣реИ: https://github.com/tjoskar/ng-lazyload-image/blob/master/src/lazyload-image.directive.ts#L37

рдпрд╣ рднреА рдЪрд╛рд╣рд┐рдП! рдЯрд┐рдкреНрдкрдгреА рднреА рдХрд░ рд░рд╣рд╛ рд╣реВрдВ рдЗрд╕рд▓рд┐рдП рдореБрдЭреЗ рдкрддрд╛ рд╣реИ рдХрд┐ рдпрд╣ рдХрдм рд╡рд┐рд▓рдп рд╣реБрдЖ рд╣реИред

#177 . рдореЗрдВ рдлрд┐рдХреНрд╕реНрдб

3.2.0 . рдореЗрдВ рд╢рд╛рдорд┐рд▓
рдзрдиреНрдпрд╡рд╛рдж @ рд░рд┐рдорд▓рд┐рди

рдХреНрдпрд╛ рдпрд╣ рдкреГрд╖реНрда рдЙрдкрдпреЛрдЧреА рдерд╛?
0 / 5 - 0 рд░реЗрдЯрд┐рдВрдЧреНрд╕

рд╕рдВрдмрдВрдзрд┐рдд рдореБрджреНрджреЛрдВ

philipgiuliani picture philipgiuliani  ┬╖  11рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

stratio84 picture stratio84  ┬╖  6рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

MonchiLin picture MonchiLin  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

alisahinozcelik picture alisahinozcelik  ┬╖  4рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

vincent-cm picture vincent-cm  ┬╖  10рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ