diff --git a/css/body-background.css b/css/body-background.css
index 9e53642..18563b0 100644
--- a/css/body-background.css
+++ b/css/body-background.css
@@ -1,6 +1,7 @@
/*Filter for body's lazy loaded background */
#bodyBackground {
+ background: var(--base-body-bg);
position: absolute;
top: 0;
left: 0;
@@ -10,7 +11,6 @@
padding: 0;
overflow: hidden;
transition: all 3s;
- color: var(--foreground);
}
.blurFiltered {
diff --git a/index.html b/index.html
index 75001fe..5f48bcf 100644
--- a/index.html
+++ b/index.html
@@ -33,7 +33,7 @@
-
+
diff --git a/js/body-background-set.js b/js/body-background-set.js
index 5f447f1..c2a0a05 100644
--- a/js/body-background-set.js
+++ b/js/body-background-set.js
@@ -1,43 +1,60 @@
class BodyBackground {
constructor() {
+ this._body = document.body;
this._bodyBackground = document.querySelector('#bodyBackground');
- this._hqBackground = document.createElement('img');
+
+ this._bodyStyle = this._body.style;
this._bodyBackgroundStyle = this._bodyBackground.style;
+
+ this._hqBackground = document.createElement('img');
+
+ // Initialize
this._startLazyLoad();
}
- _setBodyBackgrond = urlStr => {
- this._bodyBackgroundStyle.background = urlStr;
- this._bodyBackgroundStyle.backgroundSize = 'cover';
- this._bodyBackgroundStyle.backgroundRepeat = 'no-repeat';
- this._bodyBackgroundStyle.backgroundPosition = 'center';
- this._bodyBackgroundStyle.backgroundAttachment = 'fixed';
+ _styleBodyBackgrond = (elemStyle, urlStr) => {
+ elemStyle.background = urlStr;
+ elemStyle.backgroundSize = 'cover';
+ elemStyle.backgroundRepeat = 'no-repeat';
+ elemStyle.backgroundPosition = 'center';
+ elemStyle.backgroundAttachment = 'fixed';
}
_lazyLoadBackground = fileName => {
-
- // Add a class to blur it
+
+ // Add a class to blur the dummy background
this._bodyBackground.classList.add('blurFiltered');
- // Set a low quality background image
- this._setBodyBackgrond(`url('assets/backgrounds/${fileName}-low.webp')`);
+ // Set a low quality background image for the dummy background
+ this._styleBodyBackgrond(this._bodyBackgroundStyle, `url('assets/backgrounds/${fileName}-low.webp')`);
+ // After loading/fetching the _hqBackground's background image
this._hqBackground.onload = () => {
- // After downloading the HQ image, set it as bg
- this._setBodyBackgrond(`url('${this._hqBackground.src}')`);
-
- // Remove class to unblur
- this._bodyBackground.classList.remove('blurFiltered');
+ // After downloading the HQ image, set it as bg of body
+ this._styleBodyBackgrond(this._bodyStyle, `url('${this._hqBackground.src}')`);
+
+ // Add a delay before hiding the overlay dummy background to avoid the white flicker
+ setTimeout (
+ () => {
+ // Hide the dummy background
+ this._bodyBackgroundStyle.display = 'none';
+
+ // Remove class to unblur
+ this._bodyBackground.classList.remove('blurFiltered');
+
+ },
+ 1500
+ )
}
- // Add a delay when to fetch background
- setTimeout(
+ // Add a delay when to fetch the hq background
+ setTimeout (
() => {
this._hqBackground.src = `assets/backgrounds/${fileName}.webp`;
},
- 50
+ 500
);
}