Ng-lazyload-image: ์ด๋ฏธ์ง€๊ฐ€ ๋กœ๋“œ๋  ๋•Œ ์ฝœ๋ฐฑ

์— ๋งŒ๋“  2017๋…„ 07์›” 18์ผ  ยท  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;
    }
}

์•„์ด๋””์–ด๊ฐ€ ์ข‹์œผ๋ฉด ํ•„์š”ํ•œ ๊ฒฝ์šฐ pull ์š”์ฒญ์„ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

์•ˆ๋…•,
๋‚˜๋Š” ์ด๊ฒƒ์— ๋Œ€ํ•ด ์ƒ๊ฐํ•ด ์™”์œผ๋ฉฐ ๋ช‡ ๊ฐ€์ง€ ์‚ฌ์šฉ ์‚ฌ๋ก€๋ฅผ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํ’€ ๋ฆฌํ€˜์ŠคํŠธ๋ฅผ ๊ธฐ๊บผ์ด ์ˆ˜๋ฝํ•ฉ๋‹ˆ๋‹ค :). ์ด ๊ด€์ฐฐ์ž๋Š” ์ด๋ฏธ์ง€๊ฐ€ ๋กœ๋“œ๋  ๋•Œ ๋ฐฉ์ถœ๋˜๊ธฐ ๋•Œ๋ฌธ์— ๊ตฌํ˜„ํ•˜๊ธฐ๊ฐ€ ๋งค์šฐ ์‰ฝ์Šต๋‹ˆ๋‹ค. 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์— ํฌํ•จ
@rimlin ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰