Skip to content

Instantly share code, notes, and snippets.

@Demian1996
Last active April 11, 2022 07:29
Show Gist options
  • Save Demian1996/d7ae29cb39b4091e6a64e05984dd475b to your computer and use it in GitHub Desktop.
Save Demian1996/d7ae29cb39b4091e6a64e05984dd475b to your computer and use it in GitHub Desktop.
模拟medium的hexo首图渐进加载模块
/* 和背景图颜色保持一致,防止高斯模糊后差异较大 */
#page-header {
background-color: #363636;
}
.pl-container {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.pl-img {
width: 100%;
height: 100%;
position: absolute;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
opacity: 0;
transition: opacity 1s;
}
.pl-visible {
opacity: 1;
}
.pl-blur {
/* 小图锯齿多,增加高斯模糊 */
filter: blur(50px);
}
/**
* @description 实现medium的渐进加载背景的效果
*/
class ProgressiveLoad {
constructor(smallSrc, largeSrc) {
this.smallSrc = smallSrc;
this.largeSrc = largeSrc;
this.initTpl();
this.progressiveLoad();
}
/**
* @description 生成ui模板
*/
initTpl() {
this.container = document.createElement('div');
this.smallStage = document.createElement('div');
this.largeStage = document.createElement('div');
this.smallImg = new Image();
this.largeImg = new Image();
this.container.className = 'pl-container';
this.smallStage.className = 'pl-img pl-blur';
this.largeStage.className = 'pl-img';
this.container.appendChild(this.smallStage);
this.container.appendChild(this.largeStage);
this.smallImg.onload = this._onSmallLoaded.bind(this);
this.largeImg.onload = this._onLargeLoaded.bind(this);
}
/**
* @description 加载背景
*/
progressiveLoad() {
this.smallImg.src = this.smallSrc;
this.largeImg.src = this.largeSrc;
}
/**
* @description 大图加载完成
*/
_onLargeLoaded() {
this.largeStage.classList.add('pl-visible');
this.largeStage.style.backgroundImage = `url('${this.largeSrc}')`;
}
/**
* @description 小图加载完成
*/
_onSmallLoaded() {
this.smallStage.classList.add('pl-visible');
this.smallStage.style.backgroundImage = `url('${this.smallSrc}')`;
}
}
const executeLoad = (config) => {
console.log('执行渐进背景替换');
const loader = new ProgressiveLoad(config.smallSrc, config.largeSrc);
const target = document.getElementById('page-header');
// 和背景图颜色保持一致,防止高斯模糊后差异较大
if (target.children[0]) {
target.insertBefore(loader.container, target.children[0]);
}
};
// 拓展参数
const config = {
smallSrc: '/common/blog_bg_min.png',
largeSrc: '/common/blog_bg.png',
enableRoutes: ['/'],
};
if (config.enableRoutes && config.enableRoutes.length > 0) {
config.enableRoutes.forEach((route) => {
if (document.location.pathname === route) {
executeLoad(config);
}
});
} else {
executeLoad(config);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment