์๋
ํ์ธ์, ์ด๋ฏธ์ง๊ฐ ๋ก๋๋์์ ๋ ์๋ฆผ์ ๋ฐ๋ ๊ตฌํ ์ต์
์ ์ด๋ป์ต๋๊น? ๋ง์ ๊ฒฝ์ฐ์ ๋งค์ฐ ์ ์ฉํ ๊ฒ์
๋๋ค.
๋ค์ ์ฌ์ฉ ์๋ฅผ ์ ์ํฉ๋๋ค.
@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
์ด๊ฒ๋ ํ์ํด! ์ธ์ ๋ณํฉ๋๋์ง ์ ์ ์๋๋ก ๋๊ธ๋ ๋ฌ์์ต๋๋ค.
#177์์ ์์ ๋จ
3.2.0์ ํฌํจ
@rimlin ๊ฐ์ฌํฉ๋๋ค
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
์๋ ,
๋๋ ์ด๊ฒ์ ๋ํด ์๊ฐํด ์์ผ๋ฉฐ ๋ช ๊ฐ์ง ์ฌ์ฉ ์ฌ๋ก๋ฅผ ๋ณผ ์ ์์ต๋๋ค. ํ ๋ฆฌํ์คํธ๋ฅผ ๊ธฐ๊บผ์ด ์๋ฝํฉ๋๋ค :). ์ด ๊ด์ฐฐ์๋ ์ด๋ฏธ์ง๊ฐ ๋ก๋๋ ๋ ๋ฐฉ์ถ๋๊ธฐ ๋๋ฌธ์ ๊ตฌํํ๊ธฐ๊ฐ ๋งค์ฐ ์ฝ์ต๋๋ค. https://github.com/tjoskar/ng-lazyload-image/blob/master/src/lazyload-image.directive.ts#L37