Angular 6 : HD images slider

How to show an awesome slider of HD images without slowing down your website ?

I recently made a website for a friend working as a photograph. She has awesome photos, and she wanted to show them in the best resolution she can to let people appreciate her art.

So i worked on it with the goal of not slowing down her website for people and for google or other search engine.
The aim is to load low resolution images first to let your pages load faster. How it works :

• 1 : Load low resolution images
• 2 : Then it loads high resolution images on the background one after another
• 3 : When an images has his high res image loaded, the src is updated to show the high res image

chrome network check

Here we see on this screenshot, the red line is the end of our page loading. These two lines are the high resolutions images loading one after each other on the background after our page is loaded.
This works ! :)

The trick

I load the image as blob in the background one after another

getImageData64(imageUrl: string): Observable<Blob> {
  return this.http.get(imageUrl, { responseType: 'blob' });
}

Then after i just change my image background source to the new full resolution one.

loadImageSrc(i: number) {
  this.hdSliderService.getImageData64(this.items[i].highSrc)
    .subscribe(
      (res: Blob) => {
        const reader = new FileReader();
        const _this_ = this;
        reader.onloadend = function() {
          _this_.items[i].highSrc = reader.result;
          _this_.onLoaderImageLoaded(i);
          _this_.loadImagesHighRes(i + 1);
        }.bind(this);
        reader.readAsDataURL(res);
      }
    );
}

Enhancements

• put a new parameter to change time between slides
• put some arrow to manually change slide

Final word

Feel free to suggest modifications in comments.
Hope this was helpfull for you.

Download it here

Npm installation
npm i --save hd-slider-lib

Npm page : https://www.npmjs.com/package/hd-slider-lib
Github page : https://github.com/macfleid/angular-hd-slider