Ng-lazyload-image: ng: 'img'์˜ ์•Œ๋ ค์ง„ ์†์„ฑ์ด ์•„๋‹ˆ๋ฏ€๋กœ 'lazyLoad'์— ๋ฐ”์ธ๋”ฉํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

์— ๋งŒ๋“  2017๋…„ 12์›” 09์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: tjoskar/ng-lazyload-image




๋งˆ์ง€๋ง‰ ์‚ฌ์ง„:http ://wx1.sinaimg.cn/mw690/9b5fc159ly1fmahepbh5vj20er0asmxs.jpg

๋‚˜๋Š” ng ๋ฒ„์ „์„ ์‚ฌ์šฉํ•œ๋‹ค

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

๊ฐ€์ ธ์˜ค๊ธฐ ์•„๋ž˜์— LazyLoadImageModule ๋งŒ ์ถ”๊ฐ€ํ•˜๋ฉด ์ถฉ๋ถ„ํ•˜๋ฉฐ ์„ ์–ธ ์•„๋ž˜์— LazyLoadImageDirective ๋ฅผ ์ง€์ •ํ•  ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.

SSR์„ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๊นŒ? ๊ทธ๋ ‡๋‹ค๋ฉด ๊ณต์œ  app.module์˜ ๊ฐ€์ ธ์˜ค๊ธฐ ์•„๋ž˜์— LazyLoadImageModule ๋ฅผ ํฌํ•จํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๋˜๋Š” ๊ณต์œ ๋œ ๊ฒƒ์ด ์—†์œผ๋ฉด ํด๋ผ์ด์–ธํŠธ ๋ฐ ์„œ๋ฒ„ app.modules ๋‘˜ ๋‹ค์— ํฌํ•จํ•ฉ๋‹ˆ๋‹ค.

Angular 5.1.0์—์„œ ์ž˜ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค.

๋ชจ๋“  3 ๋Œ“๊ธ€

๊ฐ€์ ธ์˜ค๊ธฐ ์•„๋ž˜์— LazyLoadImageModule ๋งŒ ์ถ”๊ฐ€ํ•˜๋ฉด ์ถฉ๋ถ„ํ•˜๋ฉฐ ์„ ์–ธ ์•„๋ž˜์— LazyLoadImageDirective ๋ฅผ ์ง€์ •ํ•  ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.

SSR์„ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๊นŒ? ๊ทธ๋ ‡๋‹ค๋ฉด ๊ณต์œ  app.module์˜ ๊ฐ€์ ธ์˜ค๊ธฐ ์•„๋ž˜์— LazyLoadImageModule ๋ฅผ ํฌํ•จํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๋˜๋Š” ๊ณต์œ ๋œ ๊ฒƒ์ด ์—†์œผ๋ฉด ํด๋ผ์ด์–ธํŠธ ๋ฐ ์„œ๋ฒ„ app.modules ๋‘˜ ๋‹ค์— ํฌํ•จํ•ฉ๋‹ˆ๋‹ค.

Angular 5.1.0์—์„œ ์ž˜ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค.

Shared.module์—์„œ LazyLoadImageModule ๊ฒฐ๊ณผ๋ฅผ ๊ฐ€์ ธ์˜ค๋ ค๊ณ  ํ–ˆ๊ณ  ๋ฌธ์ œ๊ฐ€ ํ•ด๊ฒฐ๋˜์—ˆ์Œ์„ ๋ฐœ๊ฒฌํ–ˆ์Šต๋‹ˆ๋‹ค.
์ฃ„์†กํ•ฉ๋‹ˆ๋‹ค. ์ €๋Š” Google ๋ฒˆ์—ญ์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.
๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค!!
@sapierens

๋ฌธ์ œ๊ฐ€ ํ•ด๊ฒฐ๋˜์–ด ๋‹คํ–‰์ž…๋‹ˆ๋‹ค @ muxi2015

๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค, @sapierens!

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