lazy load img avatars

[vdias38]

No description provided.

[vdias38]

I've tried to use ion-img for avatars but face 2 main issues:

• the anniversaries avatar badly displayed on mobile (web)
  • If I use pipe imgServerUrly transform transparent background in black
  • without pipe img is broken
• component is only designed to be used inside the VirtualScroll component, and the VirtualScroll functionality, as currently supplied by Ionic (as of February 2018), is broken. See this post for more details

Then I've looked for some alternatives and find these 2 libs interesting:

• zyra/ionic-image-loader: Ionic Module that loads images in a background thread and caches them for later use. Uses HttpClient from Angular 4+, and cordova-plugin-file via ionic-native wrappers. No support for browser
  • Simon Gimm tutorial: Ionic Img Loading and cache
• ng-lazyload-image: support responsive img, should check if support native app
  • Tutorial: ONIC 3 Lazyload Images - Default Images ( IOS & Android )
• imgcache.js: JS library based on the File API to cache images for offline recovery (target: cordova/phonegap & chrome)
  • ng2 imgcache.js implementation
  • ng-imgcache
  • From scratch: caching images w/ Ionic 3

st-img

• st-image: Web Component built with Stencil to lazy load images

Using Stencil Built Web Components with Ionic

Registered in the npm

Not registered in the npm

• Using Stencil Built Web Components with Ionic
• Ionic-Angular setup

Publish Stencil component to npm

https://forum.ionicframework.com/t/stencil-publishing-a-stencil-component-to-npm/120940
https://www.joshmorony.com/publishing-a-web-component-using-stencil-and-using-it-anywhere/

ng-defer-load

• ng-defer-load: Angular directive to load elements lazily. It uses Intersection Observer API to check if an element is in viewport and falls back to scroll detection mechanism for unsupported browsers. Not working on child components (see deferLoad not working in Child Components TradeMe/ng-defer-load#20)
  • Example

Preventing Content Reflow From Lazy-Loaded Images

https://css-tricks.com/preventing-content-reflow-from-lazy-loaded-images/

[vdias38]

The original network activity with imgflow crop to 1024px (browsing live and contacts page) => 38 request to imgs for 5Mb downloaded

Resized img avatar to 160x160

Applying imgflow with crop to 160x160 on avatar imgs => 38 request to imgs for 960Kb downloaded

Resized + lazy load

Applying imgflow with crop to 160x160 + lazy load mmb-avatar-img => 26 request to imgs for 880Kb downloaded

[vdias38]

I've tested to integrate a stencil web component built with latest version of @stencil/core, v0.17.0, on Ionic v3, but without success. None error raised but the web component is not interpreted and lib is not loaded.
The st-img stencil web comp. works on Ionic v3 with @stencil/core v0.0.8-9.
I've found a stencil web component web-social-share running on Ionic v3 until @stencil/core@0.8.2.
Another good example of stencil wc web-photo-filter