From 4db08d7b517140c8f00f7340ccaf4892883cee49 Mon Sep 17 00:00:00 2001 From: Gerome Matilla Date: Sat, 13 Jun 2020 10:46:52 +0800 Subject: [PATCH] fix white flicker on firefox during lazy loading transition --- css/body-background.css | 2 +- index.html | 2 +- js/body-background-set.js | 55 +++++++++++++++++++++++++-------------- 3 files changed, 38 insertions(+), 21 deletions(-) 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 ); }