前言

看了 铭心石刻 的 首页背景图渐进式加载，解决卡顿难题 这篇文章开启了博客首页图片，还是挺不错的

实现

以本站使用的主题 anzhiyu 为例（butterfly通用），为首页顶部图配置渐进式加载。这个方法应该也同样适用于一图流的博客背景，有需要的朋友可以自己研究一下~

新建文件 source/js/imgloaded.js 新增以下内容，并按照注释调整图片路径

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
/**
 * @description 实现medium的渐进加载背景的效果
 */
class ProgressiveLoad {
  constructor(smallSrc, largeSrc) {
    this.smallSrc = smallSrc;
    this.largeSrc = largeSrc;
    this.initTpl();
  }

  /**
   * @description 生成ui模板
   */
  initTpl() {
    this.container = document.createElement('div');
    this.smallStage = document.createElement('div');
    this.largeStage = document.createElement('div');
    this.video = 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.video.className = 'pl-video';
    this.container.appendChild(this.smallStage);
    this.container.appendChild(this.largeStage);
    this.container.appendChild(this.video);
    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, target) => {
  const isMobile = window.matchMedia('(max-width: 767px)').matches;
  const loader = new ProgressiveLoad(
    isMobile ? config.mobileSmallSrc : config.smallSrc,
    isMobile ? config.mobileLargeSrc : config.largeSrc
  );
  // 和背景图颜色保持一致，防止高斯模糊后差异较大
  if (target.children[0]) {
    target.insertBefore(loader.container, target.children[0]);
  }
  loader.progressiveLoad();
};

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

function initProgressiveLoad(config) {
  const target = document.getElementById('page-header');
  if (target && target.classList.contains('full_page')) {
    executeLoad(config, target);
  }
}

function onPJAXComplete(config) {
  const target = document.getElementById('page-header');
  if (target && target.classList.contains('full_page')) {
    initProgressiveLoad(config);
  }
}

document.addEventListener("DOMContentLoaded", function () {
  initProgressiveLoad(config);
});

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

在 imgloaded.js 中第 70行至73行 处，配置自己的图片，可以是图片直链也可以是本地路径。这里可以获取 随机二次元背景图 。需要注意的是，在本地部署可能首页背景图不能显示，远程部署就可以解决了

新建文件 source/css/imgloaded.css 新增以下内容，并按照注释自行决定调整内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
/* 首页头图加载 */
.pl-container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  will-change: transform;
  /* 添加性能优化 */
  animation: blur-to-clear 2s cubic-bezier(.62, .21, .25, 1) 0s 1 normal backwards running, scale 1.5s cubic-bezier(.62, .21, .25, 1) 0s 1 both;
}

.pl-img {
  width: 100%;
  height: 100%;
  position: absolute;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1s;
}

@keyframes blur-to-clear {
  0% {
    filter: blur(50px);
    opacity: 1;
  }

  100% {
    filter: blur(0);
    opacity: 1;
  }
}

@keyframes scale {
  0% {
    transform: scale(1.5) translateZ(0);
    opacity: 0;
  }

  to {
    transform: scale(1) translateZ(0);
    opacity: 1;
  }
}

.pl-visible {
  opacity: 1;
}

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

在 _config.anzhiyu.yml 主题配置文件下引入文件

1
2
3
4
5
6
7
8
inject:
  head:
    # 首页图片
    - <link rel="stylesheet" href="/css/imgloaded.css?1">

  bottom:
    # 首页图片
    - <script async data-pjax src="/js/imgloaded.js?1"></script>

务必记得在主题配置文件中开启顶部图的功能，也可以像我这样配置空链接。因为js文件已经接替了图片加载功能，此处不需要配置图片（当然你也可以配置上）

1
2
# The banner image of home page
index_img: "background: url() top / cover no-repeat"

后续

在2023年9月29日，通过Kouseki式首页背景图渐进式加载 · 改将首页背景图重新优化

  • 将如下代码粘贴至 imgloaded.js 文件中

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    // 首页头图加载优化
    /**
     * @description 实现medium的渐进加载背景的效果
     */

    if (!window.ProgressiveLoad) {
      // 定义ProgressiveLoad类
      class ProgressiveLoad {
        constructor(smallSrc, largeSrc) {
          this.smallSrc = smallSrc;
          this.largeSrc = largeSrc;
          this.initScrollListener(),
          this.initTpl();
        }
        // 这里的1是滚动全程渐变 改为0.3就是前30%渐变后固定前30%产生的渐变效果
        initScrollListener() {
          window.addEventListener("scroll", (()=>{
              var e = Math.min(window.scrollY / window.innerHeight, 1);
              this.container.style.setProperty("--process", e)
          }
          ))
        }
        /**
         * @description 生成ui模板
         */
        initTpl() {
          this.container = document.createElement('div');
          this.smallStage = document.createElement('div');
          this.largeStage = document.createElement('div');
          this.video = document.createElement('div');
          this.smallImg = new Image();
          this.largeImg = new Image();
          this.container.className = 'pl-container';
          this.container.style.setProperty("--process", 0),
          this.smallStage.className = 'pl-img pl-blur';
          this.largeStage.className = 'pl-img';
          this.video.className = 'pl-video';
          this.container.appendChild(this.smallStage);
          this.container.appendChild(this.largeStage);
          this.container.appendChild(this.video);
          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, target) => {
        console.log('执行渐进背景替换');
        const isMobile = window.matchMedia('(max-width: 767px)').matches;
        const loader = new ProgressiveLoad(
          isMobile ? config.mobileSmallSrc : config.smallSrc,
          isMobile ? config.mobileLargeSrc : config.largeSrc
        );
        // 和背景图颜色保持一致，防止高斯模糊后差异较大
        if (target.children[0]) {
          target.insertBefore(loader.container, target.children[0]);
        }
        loader.progressiveLoad();
      };

      const config = {
        smallSrc: 'https://www.loliapi.com/acg/', // 小图链接 尽可能配置小于100k的图片
        largeSrc: 'https://www.loliapi.com/acg/', // 大图链接 最终显示的图片
        mobileSmallSrc: 'https://www.loliapi.com/acg/', // 手机端小图链接 尽可能配置小于100k的图片
        mobileLargeSrc: 'https://www.loliapi.com/acg/', // 手机端大图链接 最终显示的图片
        enableRoutes: ['/'],
        };

      function initProgressiveLoad(config) {
        // 每次加载前先清除已有的元素
        const container = document.querySelector('.pl-container'); 
        if (container) {
          container.remove(); 
        }
        const target = document.getElementById('page-header');
        if (target && target.classList.contains('full_page')) {
          executeLoad(config, target);
        }
      }

      function onPJAXComplete(config) {
        const target = document.getElementById('page-header');
        if (target && target.classList.contains('full_page')) {
          initProgressiveLoad(config);
        }
      }

      document.addEventListener("DOMContentLoaded", function() {
        initProgressiveLoad(config);
      });

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

    }

  • 将如下代码粘贴至 imgloaded.css 文件中

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    /* 首页头图加载 */
    body[data-type=anzhiyu] #nav,
    body[data-type=anzhiyu] #scroll-down,
    body[data-type=anzhiyu] #site-info {
      -webkit-animation: scale 2.2s cubic-bezier(.6, .1, .25, 1) .5s 1 backwards;
      animation: scale 2.2s cubic-bezier(.6, .1, .25, 1) .5s 1 backwards
    }

    @media screen and (max-width: 768px) {
      .pl-container {
        position: relative !important
      }
    }

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

      #page-header.full_page,
      .pl-container {
        height: 100vh
      }

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

      .pl-container {
        will-change: opacity, transform, filter;
        opacity: calc(1 - var(--process) * 1) !important;
        transform: scale(calc(1 + var(--process) * .1));
        filter: blur(calc(var(--process) * 10px));
      }
    }

    .pl-container {
      width: 100%;
      height: 100%;
      position: fixed;
      z-index: -2;
      overflow: hidden;
      will-change: transform;
      /* 添加性能优化 */
      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;
    }

    .pl-img {
      width: 100%;
      height: 100%;
      position: absolute;
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      opacity: .1;
      transition: opacity 1s;
      will-change: transform, opacity
    }

    .pl-video.pl-visible {
      display: block
    }

    @keyframes blur-to-clear {
      0% {
        filter: blur(50px);
        opacity: 1;
      }

      100% {
        filter: blur(0);
        opacity: 1;
      }
    }

    @keyframes scale {
      0% {
        transform: scale(1.5) translateZ(0);
        opacity: 0;
      }

      to {
        transform: scale(1) translateZ(0);
        opacity: 1;
      }
    }

    .pl-video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 0;
      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAKUlEQVQImU3IMREAIAgAwJfNkQCEsH8cijjpMf6vnXlQaIiJFx+omEBfmqIEZLe2jzcAAAAASUVORK5CYII=);
    }

    .pl-visible {
      opacity: 1;
    }

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

    /* 去除首页图片背景黑板 */
    #page-header{
      position: inherit !important;
    }