Blog首页背景图渐进式加载一图流

首页图片渐进式加载一图流

本文操作步骤为 anzhiyu 主题

渐进式加载是一种优化网页性能和用户体验的技术，它可以让图片在加载过程中逐渐显示出清晰度，从而避免了图片加载缓慢或失败时出现的空白或占位符。这个方法同样适用于一图流的博客背景，因此我们只需要更改部分代码即可实现本站首页效果。
把首页的顶图配置启用，为了加一张背景图整个博客的加载速度都受到了影响，不仅访问体验不流畅，甚至一点都不美观（特别是图片资源卡住的时候）。以下为一个调整图片加载的方案。按照原文章提供的部分代码做出调整，适配了pjax以及增加了手机端的设备判断，最终得出了本博客使用的效果。原理是先加载小图文件并进行高斯模糊处理，在大图加载完成后再对大图进行加载。

reference:
Butterfly主题优化首页大图加载效果 - 假想国
1.首页背景图渐进式加载，解决卡顿难题
2.Hexo美化：自适应切换渐进式加载首页图
3.Kouseki式首页背景图渐进式加载 · 改
anzhiyu主题一图流
(source/js/imgloaded.js 改图)

操作步骤

  • 新建文件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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
// 首页一图流加载优化
/**
 * @description 实现medium的渐进加载背景的效果
 */
(function() {
    class ProgressiveLoad {
      constructor(smallSrc, largeSrc) {
        this.smallSrc = smallSrc;
        this.largeSrc = largeSrc;
        this.initTpl();
        this.container.addEventListener('animationend', () => {
          this.smallStage.style.display = 'none'; 
        }, {once: true});
      }
  
      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);
      }
  
      progressiveLoad() {
        this.smallImg.src = this.smallSrc;
        this.largeImg.src = this.largeSrc;
      }
  
      _onLargeLoaded() {
        this.largeStage.classList.add('pl-visible');
        this.largeStage.style.backgroundImage = `url('${this.largeSrc}')`;
      }
  
      _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 ldconfig = {
      light: {
        smallSrc: '/img/pc1.png', //浅色模式 小图链接 尽可能配置小于100k的图片 
        largeSrc: '/img/pc2.png', //浅色模式 大图链接 最终显示的图片
        mobileSmallSrc: '/img/mobile1.png', //手机端浅色小图链接 尽可能配置小于100k的图片
        mobileLargeSrc: '/img/mobile2.png', //手机端浅色大图链接 最终显示的图片
        enableRoutes: ['/'],
        },
      dark: {
        smallSrc: '/img/pc1.png', //深色模式 小图链接 尽可能配置小于100k的图片 
        largeSrc: '/img/pc3.png', //深色模式 大图链接 最终显示的图片
        mobileSmallSrc: '/img/mobile1.png', //手机端深色模式小图链接 尽可能配置小于100k的图片
        mobileLargeSrc: '/img/mobile3.png', //手机端深色大图链接 最终显示的图片
        enableRoutes: ['/'],
        },
      };
  
      const getCurrentTheme = () => {
        return document.documentElement.getAttribute('data-theme'); 
      }
  
      const onThemeChange = () => {
        const currentTheme = getCurrentTheme();
        const config = ldconfig[currentTheme];
        initProgressiveLoad(config);
        document.addEventListener("DOMContentLoaded", function() {
          initProgressiveLoad(config);
        });
      
        document.addEventListener("pjax:complete", function() {
          onPJAXComplete(config);
        });
      }
  
      let initTheme = getCurrentTheme();
      let initConfig = ldconfig[initTheme];
      initProgressiveLoad(initConfig);
  
    const observer = new MutationObserver(mutations => {
      mutations.forEach(mutation => {
        if (mutation.attributeName === "data-theme" && location.pathname === '/') {
          onThemeChange();
        }
      });
    });
    
    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ["data-theme"]  
    });
  
    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);
      }
    }
  
  })();
  • 新建文件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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
/* 首页头图加载 */
.pl-container {
    width: 100%;
    height: 100%;
    z-index: -2;
    position: fixed;
    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);
  }

/* 页脚透明 */
#footer {
    background: transparent !important;
  }
  
/* 头图透明 */
#page-header {
    background: transparent !important;
  }
/* 底部透明 */
#footer-bar{
    background: transparent !important;
}

/* 更多透明 */
#category-bar{
    background: transparent !important;
}
  • 在_config.anzhiyu.yml主题配置文件下inject配置项中head和bottom处分别引入imgloaded.css和imgloaded.js文件
1
2
3
4
5
6
inject:
  head:
    - <link rel="stylesheet" href="/css/imgloaded.css?1"> # 首页图片渐进式加载

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

配置懒加载

  • 在_config.anzhiyu.yml中修改懒加载lazyload将field修改为post
1
2
3
4
5
6
lazyload:
  enable: true
  field: post # site/post
  placeholder:
  blur: true
  progressive: true

配置图片

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

1
2
# The banner image of home page
index_img: "background: url() top / cover no-repeat"
  • 在imgloaded.js中第70行至73行处，也就是以下示例的部分配置自己的图片，可以是图片直链也可以是本地路径
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const ldconfig = {
  light: {
    smallSrc: '/img/pc1.png', //浅色模式 小图链接 尽可能配置小于100k的图片 
    largeSrc: '/img/pc2.png', //浅色模式 大图链接 最终显示的图片
    mobileSmallSrc: '/img/mobile1.png', //手机端浅色小图链接 尽可能配置小于100k的图片
    mobileLargeSrc: '/img/mobile2.png', //手机端浅色大图链接 最终显示的图片
    enableRoutes: ['/'], 
    },
  dark: {
    smallSrc: '/img/pc1.png', //深色模式 小图链接 尽可能配置小于100k的图片 
    largeSrc: '/img/pc3.png', //深色模式 大图链接 最终显示的图片
    mobileSmallSrc: '/img/mobile1.png', //手机端深色模式小图链接 尽可能配置小于100k的图片
    mobileLargeSrc: '/img/mobile3.png', //手机端深色大图链接 最终显示的图片
    enableRoutes: ['/'],
    },
  };

大功告成

按照代码中的注释进行修改就好了,在配置完成后hexo三连就能看到效果了