南栀 Space

1
// 首页头图加载优化
2
/**
3
 * @description 实现medium的渐进加载背景的效果
4
 */
5

6
if (!window.ProgressiveLoad) {
7
  // 定义ProgressiveLoad类
8
  class ProgressiveLoad {
9
    constructor(smallSrc, largeSrc) {
10
      this.smallSrc = smallSrc;
11
      this.largeSrc = largeSrc;
12
      this.initScrollListener(),
13
      this.initTpl();
14
    }
15
    // 这里的1是滚动全程渐变 改为0.3就是前30%渐变后固定前30%产生的渐变效果
16
    initScrollListener() {
17
      window.addEventListener("scroll", (()=>{
18
          var e = Math.min(window.scrollY / window.innerHeight, 1);
19
          this.container.style.setProperty("--process", e)
20
      }
21
      ))
22
    }
23
    /**
24
     * @description 生成ui模板
25
     */
26
    initTpl() {
27
      this.container = document.createElement('div');
28
      this.smallStage = document.createElement('div');
29
      this.largeStage = document.createElement('div');
30
      this.video = document.createElement('div');
31
      this.smallImg = new Image();
32
      this.largeImg = new Image();
33
      this.container.className = 'pl-container';
34
      this.container.style.setProperty("--process", 0),
35
      this.smallStage.className = 'pl-img pl-blur';
36
      this.largeStage.className = 'pl-img';
37
      this.video.className = 'pl-video';
38
      this.container.appendChild(this.smallStage);
39
      this.container.appendChild(this.largeStage);
40
      this.container.appendChild(this.video);
41
      this.smallImg.onload = this._onSmallLoaded.bind(this);
42
      this.largeImg.onload = this._onLargeLoaded.bind(this);
43
    }
44

45
    /**
46
     * @description 加载背景
47
     */
48
    progressiveLoad() {
49
      this.smallImg.src = this.smallSrc;
50
      this.largeImg.src = this.largeSrc;
51
    }
52
    /**
53
     * @description 大图加载完成
54
     */
55
    _onLargeLoaded() {
56
      this.largeStage.classList.add('pl-visible');
57
      this.largeStage.style.backgroundImage = `url('${this.largeSrc}')`;
58
    }
59

60
    /**
61
     * @description 小图加载完成
62
     */
63
    _onSmallLoaded() {
64
      this.smallStage.classList.add('pl-visible');
65
      this.smallStage.style.backgroundImage = `url('${this.smallSrc}')`;
66
    }
67
  }
68

69
  const executeLoad = (config, target) => {
70
    console.log('执行渐进背景替换');
71
    const isMobile = window.matchMedia('(max-width: 767px)').matches;
72
    const loader = new ProgressiveLoad(
73
      isMobile ? config.mobileSmallSrc : config.smallSrc,
74
      isMobile ? config.mobileLargeSrc : config.largeSrc
75
    );
76
    // 和背景图颜色保持一致，防止高斯模糊后差异较大
77
    if (target.children[0]) {
78
      target.insertBefore(loader.container, target.children[0]);
79
    }
80
    loader.progressiveLoad();
81
  };
82

83
  const config = {
84
    smallSrc: 'https://t.mwm.moe/moez', // 小图链接 尽可能配置小于100k的图片
85
    largeSrc: 'https://t.mwm.moe/moez', // 大图链接 最终显示的图片
86
    mobileSmallSrc: 'https://t.mwm.moe/moez', // 手机端小图链接 尽可能配置小于100k的图片
87
    mobileLargeSrc: 'https://t.mwm.moe/moez', // 手机端大图链接 最终显示的图片
88
    enableRoutes: ['/'],
89
    };
90

91
  function initProgressiveLoad(config) {
92
    // 每次加载前先清除已有的元素
93
    const container = document.querySelector('.pl-container');
94
    if (container) {
95
      container.remove();
96
    }
97
    const target = document.getElementById('page-header');
98
    if (target && target.classList.contains('full_page')) {
99
      executeLoad(config, target);
100
    }
101
  }
102

103
  function onPJAXComplete(config) {
104
    const target = document.getElementById('page-header');
105
    if (target && target.classList.contains('full_page')) {
106
      initProgressiveLoad(config);
107
    }
108
  }
109

110
  document.addEventListener("DOMContentLoaded", function() {
111
    initProgressiveLoad(config);
112
  });
113

114
  document.addEventListener("pjax:complete", function() {
115
    onPJAXComplete(config);
116
  });
117

118
}

1
/* 首页头图加载 */
2
body[data-type=anzhiyu] #nav,
3
body[data-type=anzhiyu] #scroll-down,
4
body[data-type=anzhiyu] #site-info {
5
  -webkit-animation: scale 2.2s cubic-bezier(.6, .1, .25, 1) .5s 1 backwards;
6
  animation: scale 2.2s cubic-bezier(.6, .1, .25, 1) .5s 1 backwards
7
}
8

9
@media screen and (max-width: 768px) {
10
  .pl-container {
11
    position: relative !important
12
  }
13
}
14

15
@media screen and (min-width: 768px) {
16

17
  #page-header.full_page,
18
  .pl-container {
19
    height: 100vh
20
  }
21

22
  #page-header.full_page.expand-to-full,
23
  .pl-container.expand-to-full {
24
    height: 50vh !important
25
  }
26

27
  .pl-container {
28
    will-change: opacity, transform, filter;
29
    opacity: calc(1 - var(--process) * 1) !important;
30
    transform: scale(calc(1 + var(--process) * .1));
31
    filter: blur(calc(var(--process) * 10px));
32
  }
33
}
34

35
.pl-container {
36
  width: 100%;
37
  height: 100%;
38
  position: fixed;
39
  z-index: -2;
40
  overflow: hidden;
41
  will-change: transform;
42
  /* 添加性能优化 */
43
  animation: blur-to-clear 2.5s cubic-bezier(.6, .25, .25, 1) 0s 1 backwards, scale 2.2s cubic-bezier(.6, .1, .25, 1) .5s 1 backwards;
44
}
45

46
.pl-img {
47
  width: 100%;
48
  height: 100%;
49
  position: absolute;
50
  background-position: center;
51
  background-size: cover;
52
  background-repeat: no-repeat;
53
  opacity: .1;
54
  transition: opacity 1s;
55
  will-change: transform, opacity
56
}
57

58
.pl-video.pl-visible {
59
  display: block
60
}
61

62
@keyframes blur-to-clear {
63
  0% {
64
    filter: blur(50px);
65
    opacity: 1;
66
  }
67

68
  100% {
69
    filter: blur(0);
70
    opacity: 1;
71
  }
72
}
73

74
@keyframes scale {
75
  0% {
76
    transform: scale(1.5) translateZ(0);
77
    opacity: 0;
78
  }
79

80
  to {
81
    transform: scale(1) translateZ(0);
82
    opacity: 1;
83
  }
84
}
85

86
.pl-video {
87
  position: absolute;
88
  top: 0;
89
  left: 0;
90
  width: 100%;
91
  height: 100%;
92
  object-fit: cover;
93
  z-index: 0;
94
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAKUlEQVQImU3IMREAIAgAwJfNkQCEsH8cijjpMf6vnXlQaIiJFx+omEBfmqIEZLe2jzcAAAAASUVORK5CYII=);
95
}
96

97
.pl-visible {
98
  opacity: 1;
99
}
100

101
.pl-blur {
102
  /* 小图锯齿多，增加高斯模糊 */
103
  filter: blur(50px);
104
}
105

106
/* 去除首页图片背景黑板 */
107
[data-theme='dark'] #web_bg:before, [data-theme='dark'] #footer:before, [data-theme='dark'] #page-header:before{
108
  background-color: transparent;
109
}

1
inject:
2
  head:
3
    - <link rel="stylesheet" href="/css/imgloaded.css?1">
4

5
  bottom:
6
    - <script async data-pjax src="/js/imgloaded.js?1"></script> # 首页图片渐进式加载

1
div#bg-video
2
  video(autoplay muted loop)
3
    source(src= url_for('视频url') type='video/mp4')

1
[data-theme=light] #bg-video {
2
    position: fixed;
3
    top: 0;
4
    left: 0;
5
    width: 100%;
6
    height: 100%;
7
    z-index: -1;
8
    overflow: hidden;
9
  }
10
[data-theme=dark] #bg-video {
11
    display: none;
12
  }
13
  #bg-video video {
14
    width: 100%;
15
    height: 100%;
16
    object-fit: cover;
17
  }