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 */
#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 {

2
index.html
View File

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

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

@ -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
);
}