Feature #7438

Image Lazy Loading

Added by chok yee fan over 4 years ago. Updated almost 4 years ago.

Status:ResolvedStart date:28 April 2020
Priority:NormalDue date:
Assignee:chok yee fan% Done:

0%

Category:-Spent time:-
Target version:-

Description

Need to find function or library to handle lazy loading image.

When windows view the image, the image only load.

Possible could use ng-lazyload-image.

History

#1 Updated by chok yee fan over 4 years ago

Could wrap inside the oik-image

#2 Updated by chok yee fan over 4 years ago

  • Assignee set to Boon Yow Chua

#3 Updated by Tan Ping TP over 4 years ago

  • Status changed from New to Resolved

Revision: 190905
Author: tanping
Date: Saturday, May 2, 2020 2:47:49 PM
Message:
Feature #7438
----
Modified : /S-MADP/02_BaseProjects/BASE100/trunk/cc-base-web/package.json
Added : /S-MADP/02_BaseProjects/BASE100/trunk/cc-base-web/src/app/shared/component/oik-image
Added : /S-MADP/02_BaseProjects/BASE100/trunk/cc-base-web/src/app/shared/component/oik-image/oik-image.ts
Modified : /S-MADP/02_BaseProjects/BASE100/trunk/cc-base-web/src/app/shared/constants.ts
Modified : /S-MADP/02_BaseProjects/BASE100/trunk/cc-base-web/src/app/shared/shared.module.ts
Added : /S-MADP/02_BaseProjects/BASE100/trunk/cc-base-web/src/app/shared/sl-common/img-cache
Added : /S-MADP/02_BaseProjects/BASE100/trunk/cc-base-web/src/app/shared/sl-common/img-cache/img-cache.directive.ts
Added : /S-MADP/02_BaseProjects/BASE100/trunk/cc-base-web/src/app/shared/sl-common/img-cache/img-cache.module.ts
Added : /S-MADP/02_BaseProjects/BASE100/trunk/cc-base-web/src/app/shared/sl-common/img-cache/img-cache.service.ts

#4 Updated by chok yee fan almost 4 years ago

  • Assignee changed from Boon Yow Chua to Tan Hua Sheng

#5 Updated by Tan Hua Sheng almost 4 years ago

  • Status changed from Resolved to In Progress

Revision: 199032
Author: inttanhs
Date: Monday, November 2, 2020 3:30:50 PM
Message:
TAN HUA SHENG : Modified oik-image.ts for lazy loading img function, currently lazy loading img function is working but img caching still not done yet.
Lazy loading img reference 1 : https://netbasal.com/lazy-load-images-in-angular-with-two-lines-of-code-beb13cd5a1c4
Lazy loading img reference 2 : https://medium.com/@realTomaszKula/lazy-load-images-in-30-lines-of-code-3fe801223ffa
----
Modified : /S-MADP/02_BaseProjects/BASE100/trunk/cc-base-web/src/app/public/error404/error404.component.html
Modified : /S-MADP/02_BaseProjects/BASE100/trunk/cc-base-web/src/app/public/error404/error404.component.ts
Modified : /S-MADP/02_BaseProjects/BASE100/trunk/cc-base-web/src/app/shared/component/oik-image/oik-image.ts
Modified : /S-MADP/02_BaseProjects/BASE100/trunk/cc-base-web/src/app/shared/constants.ts
Modified : /S-MADP/02_BaseProjects/BASE100/trunk/cc-base-web/src/app/shared/layout/mleb-side-layout/mleb-side-layout.component.html
Modified : /S-MADP/02_BaseProjects/BASE100/trunk/cc-base-web/src/app/shared/shared.module.ts
Added : /S-MADP/02_BaseProjects/BASE100/trunk/cc-base-web/src/assets/imgs
Added : /S-MADP/02_BaseProjects/BASE100/trunk/cc-base-web/src/assets/imgs/smiley.png
Added : /S-MADP/02_BaseProjects/BASE100/trunk/cc-base-web/src/assets/imgs/testing.png

#6 Updated by Tan Hua Sheng almost 4 years ago

Revision: 199151
Author: inttanhs
Date: Wednesday, November 4, 2020 1:20:29 PM
Message:
TAN HUA SHENG : Image Caching not fixed yet. Still have some bugs in image.service.ts . References and websites for solving bugs are commented inside image.service.ts . For the image cache testing is done on error404 html and component.ts .
----
Modified : /S-MADP/02_BaseProjects/BASE100/trunk/cc-base-web/src/app/public/error404/error404.component.html
Modified : /S-MADP/02_BaseProjects/BASE100/trunk/cc-base-web/src/app/public/error404/error404.component.ts
Modified : /S-MADP/02_BaseProjects/BASE100/trunk/cc-base-web/src/app/shared/constants.ts
Added : /S-MADP/02_BaseProjects/BASE100/trunk/cc-base-web/src/image.service.spec.ts
Added : /S-MADP/02_BaseProjects/BASE100/trunk/cc-base-web/src/image.service.ts

#7 Updated by chok yee fan almost 4 years ago

  • Assignee changed from Tan Hua Sheng to Kee Yong Cheng

#8 Updated by Kee Yong Cheng almost 4 years ago

  • Status changed from In Progress to Resolved
  • Assignee changed from Kee Yong Cheng to chok yee fan

Revision: 199895
Author: intkeeyc
Date: Friday, November 20, 2020 11:59:36 AM
Message:
Kee Yong Cheng: Image Lazy Loading and using custom tag for image (oik-img)
----
Modified : /S-MADP/02_BaseProjects/BASE100/trunk/cc-base-web/src/app/public/error404/error404-routing.module.ts
Modified : /S-MADP/02_BaseProjects/BASE100/trunk/cc-base-web/src/app/public/error404/error404.component.html
Modified : /S-MADP/02_BaseProjects/BASE100/trunk/cc-base-web/src/app/public/error404/error404.component.ts
Modified : /S-MADP/02_BaseProjects/BASE100/trunk/cc-base-web/src/app/public/error404/error404.module.ts
Added : /S-MADP/02_BaseProjects/BASE100/trunk/cc-base-web/src/app/shared/component/oik-image/oik-image.component.scss
Added : /S-MADP/02_BaseProjects/BASE100/trunk/cc-base-web/src/app/shared/component/oik-image/oik-image.component.ts
Modified : /S-MADP/02_BaseProjects/BASE100/trunk/cc-base-web/src/app/shared/shared.module.ts
Modified : /S-MADP/02_BaseProjects/BASE100/trunk/cc-base-web/src/image.service.ts

Also available in: Atom PDF