0

I want to show images as per network strength(2g/3g/4g) type.
I want to perform this in angular. I want to optimize images.

Basically I need it to maintain and optimization of image loading. I am maintaining 2 type of images like if network is 2g then it will load thumbnail size(in KBs) images and if network is better(3g,4g) then it load the actual size image(in MBs). Hope you understand my issue.

Riyaz Khan
  • 23
  • 1
  • 9
  • Any help will be appreciated. – Riyaz Khan Nov 14 '19 at 07:29
  • Possible duplicate of [How do I check connection type (WiFi/LAN/WWAN) using HTML5/JavaScript?](https://stackoverflow.com/questions/11701328/how-do-i-check-connection-type-wifi-lan-wwan-using-html5-javascript) – insertusernamehere Nov 14 '19 at 07:31
  • i am not that your question will get you many responses. Perhaps include what are your findings for a potential solution, if you tried it and if it had worked or not? – SNicolaou Nov 14 '19 at 07:31
  • Basically I need it to maintain and optimization of image loading. I am maintaining 2 type of images like if network is 2g then it will load thumbnail size(in KBs) images and if network is better(3g,4g) then it load the actual size image(in MBs). Hope you understand my issue. – Riyaz Khan Nov 14 '19 at 09:24

1 Answers1

0

Experimental windows.navigator.connection

it has a property type called effectiveType that can give you what type of connection the user have.

If you're using Angular, you can simply use it as:

const networkType = navigator.connection.effectiveType;

if you're using Angular with universal, you can add platform isPlatformBrowser

import { PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

//inside your class constructor
isBrowser: any;
        constructor( @Inject(PLATFORM_ID) private platformId: object) {
        this.isBrowser = isPlatformBrowser(platformId);
      }

//condition if code will run in client
if (this.isBrowser) {
    const networkType = navigator.connection.effectiveType;
}
ALBlancoIV
  • 1
  • 3