holm/the-glorious-startpage
1
0
Fork 0
forked from extern/the-glorious-startpage
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix white flicker on firefox during lazy loading transition

Browse Source
This commit is contained in:
Gerome Matilla 2020-06-13 10:46:52 +08:00
parent 7a1a3b7167
commit 4db08d7b51
3 changed files with 38 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/body-background.css
View File

@ -1,6 +1,7 @@
/*Filter for body's lazy loaded background */ /*Filter for body's lazy loaded background */
#bodyBackground { #bodyBackground {
background: var(--base-body-bg);
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -10,7 +11,6 @@
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
transition: all 3s; transition: all 3s;
color: var(--foreground);
} }
.blurFiltered { .blurFiltered {

2
index.html
View File

@ -33,7 +33,7 @@
</head> </head>
<body> <body>
<!-- The place where we set the background/image --> <!-- The place where we set the DUMMY background/image -->
<div id='bodyBackground'></div> <div id='bodyBackground'></div>
<div class='bar' id='topPanel'> <div class='bar' id='topPanel'>

55
js/body-background-set.js
View File

@ -1,43 +1,60 @@
class BodyBackground { class BodyBackground {
constructor() { constructor() {
this._body = document.body;
this._bodyBackground = document.querySelector('#bodyBackground'); this._bodyBackground = document.querySelector('#bodyBackground');
this._hqBackground = document.createElement('img');
this._bodyStyle = this._body.style;
this._bodyBackgroundStyle = this._bodyBackground.style; this._bodyBackgroundStyle = this._bodyBackground.style;
this._hqBackground = document.createElement('img');
// Initialize
this._startLazyLoad(); this._startLazyLoad();
} }
_setBodyBackgrond = urlStr => { _styleBodyBackgrond = (elemStyle, urlStr) => {
this._bodyBackgroundStyle.background = urlStr; elemStyle.background = urlStr;
this._bodyBackgroundStyle.backgroundSize = 'cover'; elemStyle.backgroundSize = 'cover';
this._bodyBackgroundStyle.backgroundRepeat = 'no-repeat'; elemStyle.backgroundRepeat = 'no-repeat';
this._bodyBackgroundStyle.backgroundPosition = 'center'; elemStyle.backgroundPosition = 'center';
this._bodyBackgroundStyle.backgroundAttachment = 'fixed'; elemStyle.backgroundAttachment = 'fixed';
} }
_lazyLoadBackground = fileName => { _lazyLoadBackground = fileName => {
// Add a class to blur it // Add a class to blur the dummy background
this._bodyBackground.classList.add('blurFiltered'); this._bodyBackground.classList.add('blurFiltered');
// Set a low quality background image // Set a low quality background image for the dummy background
this._setBodyBackgrond(`url('assets/backgrounds/${fileName}-low.webp')`); this._styleBodyBackgrond(this._bodyBackgroundStyle, `url('assets/backgrounds/${fileName}-low.webp')`);
// After loading/fetching the _hqBackground's background image
this._hqBackground.onload = () => { this._hqBackground.onload = () => {
// After downloading the HQ image, set it as bg // After downloading the HQ image, set it as bg of body
this._setBodyBackgrond(`url('${this._hqBackground.src}')`); this._styleBodyBackgrond(this._bodyStyle, `url('${this._hqBackground.src}')`);
// Remove class to unblur // Add a delay before hiding the overlay dummy background to avoid the white flicker
this._bodyBackground.classList.remove('blurFiltered'); 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 // Add a delay when to fetch the hq background
setTimeout( setTimeout (
() => { () => {
this._hqBackground.src = `assets/backgrounds/${fileName}.webp`; this._hqBackground.src = `assets/backgrounds/${fileName}.webp`;
}, },
50 500
); );
} }