首页背景渐进与随机

前言

看了石姐@铭心石刻的博客，觉得这种加载很酷，想加入自己的博客，说干就干

参考链接：首页背景图渐进式加载，解决卡顿难题

具体实现

新建文件

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
// 首页头图加载优化
/**
 * @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.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, 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://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);
  });

css文件

  • 新建文件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
    /* 首页头图加载 */
    .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主题配置文件下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> # 首页图片渐进式加载

配置图片

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

1
2
3
4
5
6
7
const config = {
  smallSrc: '/img/xiaotu.jpg', // 小图链接 尽可能配置小于100k的图片
  largeSrc: '/img/tu.jpg', // 大图链接 最终显示的图片
  mobileSmallSrc: '/img/sjxt.jpg', // 手机端小图链接 尽可能配置小于100k的图片
  mobileLargeSrc: '/img/sjdt.jpg', // 手机端大图链接 最终显示的图片
  enableRoutes: ['/'],
  };

随机图片

在上方的图片配置中，可以获取 随机二次元背景图 。

每次打开后即是随机图片。

随机壁纸API汇总

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 必应每日壁纸
let bingDayBg = screen.width <= 768 ? "url(https://bing.img.run/m.php)" : "url(https://bing.img.run/1920x1080.php)";
// 必应历史壁纸
let bingHistoryBg = screen.width <= 768 ? "url(https://bing.img.run/rand_m.php)" : "url(https://bing.img.run/rand.php)";
// EEE.DOG动漫壁纸
let EEEDog = "url(https://api.yimian.xyz/img?type=moe&size=1920x1080)";
// seovx随机美图
let seovx = "url(https://cdn.seovx.com/?mom=302)";
// picsum随机壁纸
let picsum = "url(https://picsum.photos/1920/1080.webp)";
// 小歪二次元壁纸
let waiDongman = "url(https://api.ixiaowai.cn/api/api.php)";
//  小歪高清壁纸
let waiBizhi = "url(https://api.ixiaowai.cn/gqapi/gqapi.php)";
// 博天随机壁纸
let btstu = "url(http://api.btstu.cn/sjbz/?lx=suiji)";
// tuapi动漫壁纸
let tuapi = "url(https://tuapi.eees.cc/api.php?category=dongman)";
// unsplash随机壁纸 https://source.unsplash.com/random/1920x1080/daily (weekly)
let unsplash = "url(https://source.unsplash.com/random/1920x1080/)";

API链接就是引号引着的部分，具体的参数可以到相应官网查看API文档，这部分已经通过测试，到目前为止都是可用的，并且壁纸质量比较高；尤其是必应、unsplash、picsum这几个API的图片质量十分高，赶紧给你的网站换上随机壁纸吧！

开启主页顶部图

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

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