Ng-lazyload-image: DefaultImage рдФрд░ lazyLoad рдХреЗ рдмреАрдЪ рд╕рдВрдХреНрд░рдордг рдкреНрд░рднрд╛рд╡ рдХреИрд╕реЗ рдмрдирд╛рдПрдВ

рдХреЛ рдирд┐рд░реНрдорд┐рдд 26 рдЬрдире░ 2018  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ  ┬╖  рд╕реНрд░реЛрдд: tjoskar/ng-lazyload-image

рдирдорд╕реНрдХрд╛рд░ рддрдЬрд╕реНрдХрд░ред рдЗрд╕ рдорд╣рд╛рди рдкреБрд╕реНрддрдХрд╛рд▓рдп рдХреЗ рд▓рд┐рдП рдзрдиреНрдпрд╡рд╛рдж! рдореИрдВ рдпрд╣ рдкреВрдЫрдирд╛ рдЪрд╛рд╣рддрд╛ рд╣реВрдВ рдХрд┐ рдХреНрдпрд╛ рдбрд┐рдлреЙрд▓реНрдЯрдЗрдореЗрдЬ рдФрд░ рд▓реЗрдЬреА рд▓реЛрдбреЗрдб рдЗрдореЗрдЬ рд╕реЗ рд╕рдВрдХреНрд░рдордг рдкреНрд░рднрд╛рд╡ рдкреИрджрд╛ рдХрд░рдирд╛ рд╕рдВрднрд╡ рд╣реИред

рдЕрдЧреНрд░рд┐рдо рдореЗрдВ рдорджрдж рдХреЗ рд▓рд┐рдП рдзрдиреНрдпрд╡рд╛рдж

рд╕рдмрд╕реЗ рдЙрдкрдпреЛрдЧреА рдЯрд┐рдкреНрдкрдгреА

HI @ AndreasSchmid1 , рдЕрдкрдиреА рддрд░рд╣ рдХреЗ рд╢рдмреНрджреЛрдВ рдХреЗ рд▓рд┐рдП рдзрдиреНрдпрд╡рд╛рджред

рдЖрдк рдЫрд╡рд┐ рдкрд░ рдПрдХ рдПрдиреАрдореЗрд╢рди рдЬреЛрдбрд╝ рд╕рдХрддреЗ рд╣реИрдВ, рдЬреИрд╕реЗред

img.ng-lazyloaded {
  animation: fadein .5s;
}
<strong i="8">@keyframes</strong> fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

(рдЙрджрд╛рд╣рд░рдг рдкреГрд╖реНрда рдкрд░ "рдбрд┐рдлрд╝реЙрд▓реНрдЯ рдЫрд╡рд┐" рджреЗрдЦреЗрдВ: https://tjoskar.github.io/ng-lazyload-images)

рдпрджрд┐ рдЖрдк рджреЛ рдЫрд╡рд┐рдпрд╛рдВ рдмрдирд╛рддреЗ рд╣реИрдВ, рддреЛ рдПрдХ рдбрд┐рдлрд╝реЙрд▓реНрдЯ рдЫрд╡рд┐ рдХреЗ рд╕рд╛рде рдФрд░ рдПрдХ рдЖрд▓рд╕реА рд▓реЛрдб рд╡рд╛рд▓реЗ рдХреЗ рд╕рд╛рде рдЖрдк рдЫрд╡рд┐рдпреЛрдВ рдХреЗ рдмреАрдЪ рдПрдХ рд╕рдВрдХреНрд░рдордг рдЬреЛрдбрд╝ рд╕рдХрддреЗ рд╣реИрдВред рдЙрджрд╛ред https://github.com/tjoskar/ng-lazyload-image/blob/master/example/pixelated-image.component.ts (рдЙрджрд╛рд╣рд░рдг рдкреГрд╖реНрда рдкрд░ "рдкрд┐рдХреНрд╕реЗрд▓ рдЫрд╡рд┐" рджреЗрдЦреЗрдВ: https://tjubkar.github.io/ рдПрдирдЬреА-рдЖрд▓рд╕реА рд▓реЛрдб-рдЫрд╡рд┐)
рдЬреИрд╕рд╛ рдХрд┐ рдЖрдк рдЬрд╛рдирддреЗ рд╣реИрдВ, рдЖрдк рдПрдиреАрдореЗрд╢рди рдХреЛ рджреЗрдЦрдиреЗ рдХреЗ рд▓рд┐рдП рдПрдиреАрдореЗрд╢рди рдХреЛ рдзреАрдорд╛ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ (https://developers.google.com/web/tools/chrome-devtools/inspect-styles/animations)ред

background-image рдкрд░ рдПрдХ рд╕рдВрдХреНрд░рдордг рдЬреЛрдбрд╝рдирд╛ рднреА рд╕рдВрднрд╡ рд╣реИ:

#image {
  height: 250px;
  width: 500px;
  transition: background-image 1s ease-out;
}
md5-a293a4af2fed33e82fce83f3f4407a8e


рдЗрд╕ рдкреГрд╖реНрда рдХреЛ рдПрдХ рдЙрджрд╛рд╣рд░рдг рдХреЗ рд▓рд┐рдП рджреЗрдЦреЗрдВ (ng-lazyload-image рдХрд╛ рдЙрдкрдпреЛрдЧ рдирд╣реАрдВ): http://jsfiddle.net/8L77755/4/

рдпрджрд┐ рдЖрдк рд╕рдорд╕реНрдпрд╛рдУрдВ рдореЗрдВ рднрд╛рдЧ рд▓реЗрддреЗ рд╣реИрдВ рддреЛ рдореБрдЭреЗ рдмрддрд╛рдПрдВред

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

HI @ AndreasSchmid1 , рдЕрдкрдиреА рддрд░рд╣ рдХреЗ рд╢рдмреНрджреЛрдВ рдХреЗ рд▓рд┐рдП рдзрдиреНрдпрд╡рд╛рджред

рдЖрдк рдЫрд╡рд┐ рдкрд░ рдПрдХ рдПрдиреАрдореЗрд╢рди рдЬреЛрдбрд╝ рд╕рдХрддреЗ рд╣реИрдВ, рдЬреИрд╕реЗред

img.ng-lazyloaded {
  animation: fadein .5s;
}
<strong i="8">@keyframes</strong> fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

(рдЙрджрд╛рд╣рд░рдг рдкреГрд╖реНрда рдкрд░ "рдбрд┐рдлрд╝реЙрд▓реНрдЯ рдЫрд╡рд┐" рджреЗрдЦреЗрдВ: https://tjoskar.github.io/ng-lazyload-images)

рдпрджрд┐ рдЖрдк рджреЛ рдЫрд╡рд┐рдпрд╛рдВ рдмрдирд╛рддреЗ рд╣реИрдВ, рддреЛ рдПрдХ рдбрд┐рдлрд╝реЙрд▓реНрдЯ рдЫрд╡рд┐ рдХреЗ рд╕рд╛рде рдФрд░ рдПрдХ рдЖрд▓рд╕реА рд▓реЛрдб рд╡рд╛рд▓реЗ рдХреЗ рд╕рд╛рде рдЖрдк рдЫрд╡рд┐рдпреЛрдВ рдХреЗ рдмреАрдЪ рдПрдХ рд╕рдВрдХреНрд░рдордг рдЬреЛрдбрд╝ рд╕рдХрддреЗ рд╣реИрдВред рдЙрджрд╛ред https://github.com/tjoskar/ng-lazyload-image/blob/master/example/pixelated-image.component.ts (рдЙрджрд╛рд╣рд░рдг рдкреГрд╖реНрда рдкрд░ "рдкрд┐рдХреНрд╕реЗрд▓ рдЫрд╡рд┐" рджреЗрдЦреЗрдВ: https://tjubkar.github.io/ рдПрдирдЬреА-рдЖрд▓рд╕реА рд▓реЛрдб-рдЫрд╡рд┐)
рдЬреИрд╕рд╛ рдХрд┐ рдЖрдк рдЬрд╛рдирддреЗ рд╣реИрдВ, рдЖрдк рдПрдиреАрдореЗрд╢рди рдХреЛ рджреЗрдЦрдиреЗ рдХреЗ рд▓рд┐рдП рдПрдиреАрдореЗрд╢рди рдХреЛ рдзреАрдорд╛ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ (https://developers.google.com/web/tools/chrome-devtools/inspect-styles/animations)ред

background-image рдкрд░ рдПрдХ рд╕рдВрдХреНрд░рдордг рдЬреЛрдбрд╝рдирд╛ рднреА рд╕рдВрднрд╡ рд╣реИ:

#image {
  height: 250px;
  width: 500px;
  transition: background-image 1s ease-out;
}
md5-a293a4af2fed33e82fce83f3f4407a8e


рдЗрд╕ рдкреГрд╖реНрда рдХреЛ рдПрдХ рдЙрджрд╛рд╣рд░рдг рдХреЗ рд▓рд┐рдП рджреЗрдЦреЗрдВ (ng-lazyload-image рдХрд╛ рдЙрдкрдпреЛрдЧ рдирд╣реАрдВ): http://jsfiddle.net/8L77755/4/

рдпрджрд┐ рдЖрдк рд╕рдорд╕реНрдпрд╛рдУрдВ рдореЗрдВ рднрд╛рдЧ рд▓реЗрддреЗ рд╣реИрдВ рддреЛ рдореБрдЭреЗ рдмрддрд╛рдПрдВред

рдирдорд╕реНрддреЗ,
рдореИрдВ рдХреЛрдгреАрдп 5 рдореЗрдВ рдПрдХ рд╡реЗрдм рдПрдкреНрд▓рд┐рдХреЗрд╢рди рд╡рд┐рдХрд╕рд┐рдд рдХрд░ рд░рд╣рд╛ рд╣реВрдВ рдЬрд┐рд╕рдореЗрдВ рдореИрдВ рдЕрдкрдиреЗ html рдкреЗрдЬ рдореЗрдВ ngx рдмреВрдЯрд╕реНрдЯреНрд░реИрдк рд╣рд┐рдВрдбреЛрд▓рд╛ рдФрд░ рдПрдирдЬреА-рд▓рд╛рдЬрд▓реЛрдб-рдЫрд╡рд┐ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рд░рд╣рд╛ рд╣реВрдВред рдореЗрд░реА рдбрд┐рдлрд╝реЙрд▓реНрдЯ рдЫрд╡рд┐ рд╕рдлрд▓рддрд╛рдкреВрд░реНрд╡рдХ рд╡рд╛рд╕реНрддрд╡рд┐рдХ рдЫрд╡рд┐ рд▓реЛрдб рд╣реЛрдиреЗ рд╕реЗ рдкрд╣рд▓реЗ рд╕реНрдкрд┐рдирд░ рдХреЛ рд╕рдлрд▓рддрд╛рдкреВрд░реНрд╡рдХ рджрд┐рдЦрд╛рддреА рд╣реИред рд▓реЗрдХрд┐рди рд╕рдорд╕реНрдпрд╛ рдпрд╣ рд╣реИ рдХрд┐ рдореИрдВ рдХреНрдпрд╛ рд╣реВрдВ рд╕рд╛рдордирд╛ рдХрд░рдирд╛ рдореЗрд░реА рдбрд┐рдлрд╝реЙрд▓реНрдЯ рдЫрд╡рд┐ рдореЗрд░реЗ рд╣рд┐рдВрдбреЛрд▓рд╛ рдЖрдХрд╛рд░ рдХреЗ рдЕрдиреБрд╕рд╛рд░ рдЖрдХрд╛рд░ рдореЗрдВ рднреА рдмрдврд╝ рдЬрд╛рддреА рд╣реИред рдореЗрд░реА рдбрд┐рдлрд╝реЙрд▓реНрдЯ рдЫрд╡рд┐ рдХреЗ рдЖрдХрд╛рд░ рдХреЛ рдареАрдХ рдХрд░рдиреЗ рдХрд╛ рдХреЛрдИ рддрд░реАрдХрд╛ рдирд╣реАрдВ рд╣реИ

рдиреАрдЪреЗ рдореЗрд░рд╛ рдХреЛрдб рд╣реИ ------------------------

[lazyLoad] = "image.carousel_image_key"
[рдСрдлрд╕реЗрдЯ] = "рдСрдлрд╕реЗрдЯ">

DefaultImage рдПрдХ рд╕реНрдкрд┐рдирд░ GIF рдЫрд╡рд┐ рд╣реИ (рдореЗрд░реЗ рдШрдЯрдХ рд╕реЗ рдЖрддрд╛ рд╣реИ) рдЬреЛ рдореИрдВ рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛рдУрдВ рдХреЛ рддрдм рддрдХ рджрд┐рдЦрд╛рдирд╛ рдЪрд╛рд╣рддрд╛ рд╣реВрдВ рдЬрдм рддрдХ рдХрд┐ рдореЗрд░реА рд╡рд╛рд╕реНрддрд╡рд┐рдХ рдЫрд╡рд┐рдпрд╛рдВ рд▓реЛрдб рдирд╣реАрдВ рд╣реЛ рдЬрд╛рддреА рд╣реИрдВ ([lazyLoad] = "image.carousel_image_key")ред I рдиреАрдЪреЗ рдХреЗ рд░реВрдк рдореЗрдВ рдореЗрд░реЗ рд╣рд┐рдВрдбреЛрд▓рд╛ рдХрд╛ рдЖрдХрд╛рд░ рддрдп рдХрд┐рдпрд╛ рдЧрдпрд╛ рд╣реИред рдореЗрд░реА рд╕реА.рдПрд╕.

mainCarouselImgLayout {

рдкреНрд░рджрд░реНрд╢рди рдХреНрд╖реЗрддреНрд░;
рдЪреМрдбрд╝рд╛рдИ: 100%;
рдКрдВрдЪрд╛рдИ: 400px
}
рдпрд╣ рдПрдХ рд╣реА рд╕реАрдПрд╕рдПрд╕ рдореЗрд░реА рд╕реНрдкрд┐рдирд░ рдЫрд╡рд┐ рдкрд░ рд▓рд╛рдЧреВ рд╣реЛрддрд╛ рд╣реИред рдореИрдВ рдХреНрдпрд╛ рдЪрд╛рд╣рддрд╛ рд╣реВрдВ рдХрд┐ рдореЗрд░реА рд╕реНрдкрд┐рдирд░ рдЫрд╡рд┐ рдХрд╛ рдЖрдХрд╛рд░ рдмрд░рдХрд░рд╛рд░ рд░рд╣реЗ рдФрд░ рдХреЗрд╡рд▓ рд╣рд┐рдВрдбреЛрд▓рд╛ рдЫрд╡рд┐ рдХреА рдКрдВрдЪрд╛рдИ рдмрджрд▓ рдЬрд╛рдПред рдЕрдм рд╕реНрдкрд┐рдирд░ рдХреА рдЫрд╡рд┐ рдмрд╣реБрдд рдмрдбрд╝реА рдФрд░ рд╡рд┐рдХреГрдд рджрд┐рдЦрддреА рд╣реИ

@chandrasachin рдХреНрдпрд╛ рдЖрдкрдиреЗ рдЦреЛрдЬ рдХрд┐рдпрд╛?
рдореЗрд░реЗ рд╕реНрдкрд┐рдирд░ рдХрд╛ рдЖрдХрд╛рд░ рдореЗрд░реА рдЫрд╡рд┐ рдХреА рддреБрд▓рдирд╛ рдореЗрдВ рдХрд╛рд░реНрдб рдореЗрдВ рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рдмрдбрд╝рд╛ рд╣реИред рдореИрдВ рдЫреЛрдЯреЗ рдЖрдХрд╛рд░ рдХреЗ рд▓рд┐рдП рд╕реНрдкрд┐рдирд░ рдЫрд╡рд┐ рдХрд╛ рдЖрдХрд╛рд░ рдмрджрд▓рдирд╛ рдЪрд╛рд╣рддрд╛ рд╣реВрдВ

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

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

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

sandeepdussa picture sandeepdussa  ┬╖  9рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

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

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

rimlin picture rimlin  ┬╖  5рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ