From f428156f98df7ee6d5a3f70e856bc17ab440312b Mon Sep 17 00:00:00 2001
From: Guilherme Borges Bastos <guilhermeborgesbastos@gmail.com>
Date: Fri, 22 May 2020 10:33:39 -0300
Subject: [PATCH] Preloading background images avoiding 'blinking'.

- Preloading the boundaries images related to the current position in order to avoid the 'blinking' of the background while navigating.
---
 src/app/experience/experience.component.ts | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/app/experience/experience.component.ts b/src/app/experience/experience.component.ts
index f892f34e6..d4bda6c35 100644
--- a/src/app/experience/experience.component.ts
+++ b/src/app/experience/experience.component.ts
@@ -52,10 +52,20 @@ export class ExperienceComponent implements OnInit {
           this.experiencesOrdered.sort(this.sortService.sort('position', 'desc'));       
           this.backgroundUrl = this.retrieveBackgroundUrl();
           this.updateMobileNavigationView();
+          this.preloadBounderyImages(experiences.map(xp => xp.backgroundUrl));
         });
   }
 
-  createListSelector(position: number): string {
+  // Preloads the boundaries images related to the current position in order to avoid the 'blinking' of the background while navigating.
+  private preloadBounderyImages(images: string[]) {
+    images.forEach(function (image, i) {
+      const preloadImages = new Array();
+      preloadImages[i] = new Image();
+      preloadImages[i].src = image;
+    });
+  }
+
+  private createListSelector(position: number): string {
     return `li[id="${position}"]`;
   } 
 
@@ -116,11 +126,11 @@ export class ExperienceComponent implements OnInit {
     }
   }
 
-  retrieveBackgroundUrl(): string {
+  private retrieveBackgroundUrl(): string {
     return this.experiences[this.currentPosition - 1].backgroundUrl;
   }
 
-  updateMobileNavigationView() {
+  private updateMobileNavigationView() {
     this.previousYear = 
       this.experiences[this.currentPosition - 2]?.startAt || this.experiences[this.currentPosition - 1].startAt;
     this.currentYear =