旧的方案

原理：通过读取/resources/bglist.json来获取背景图片列表，从而更换本站背景图片。

bglist.json:

1
2
3
4
5
6
7
8
9
10

{
	"Pix":[
		['...','...']
	],
	"mPix":[
		['...','...']
	]
}

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
//……
//更换背景图片
function SetBG(imgurl){	$('#web_bg').css({'visibility':'true','background-image':"url('"+ imgurl +"')"}) }

var PIXIV_ID = ""
//背景图片状态（加载成功/失败）
var BGReady = new Boolean(undefined)

//ajax获取
var request = new XMLHttpRequest();
request.open("GET","/resources/bglist.json?t="+Math.random());
request.send();

//图片保存URL
var CDN = "https://kawashiro_ryofu.gitee.io/blogimagerc/moebg/"
var URL = ""

function ChangeBG(){

	
	var r = Math.round(Math.random()*16384)

	//随机抽取
	function RandomBG(){
					if(request.readyState == 4)
					{
						
						var list = JSON.parse(request.responseText);
						
						//区分屏幕
						if(screen.width / screen.height <= 1){
							URL = CDN + list.mPix[r % list.mPix.length][1]
							PIXIV_ID = list.mPix[r % list.mPix.length][0]
						}else{
							URL = CDN + list.Pix[r % list.Pix.length][1]
							PIXIV_ID = list.Pix[r % list.Pix.length][0]
						}

						SetBG(URL)
						
						//snackbar提示
						$.snackbar({content: '<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.3/css/all.css" rel="stylesheet"> 背景图片Pixiv ID: <a href="'+ URL +'" target="_blank">'+PIXIV_ID + '</a>'});
						
						BGReady = true
						
					}else{
						$.snackbar({content: '<i class="fa fa-exclamation-triangle" aria-hidden="true"></i> 背景图片载入失败'});
						BGReady = false
						
					}

				}

	//设置延迟，5秒后检查ajax请求状态，成功则调用RandomBG函数
	setTimeout(function(){
		if(request.readyState == 4){
			RandomBG()
		}else{
			$.snackbar({content: '<i class="fa fa-exclamation-triangle" aria-hidden="true"></i> 背景图片载入失败'});
			BGReady = false
		}
	},5000)
}
//……

就近期而言，加上自定义的字体后，常发生背景图片加载失败的问题，原因不明。大概是ajax的问题。

改进

突发奇想的产物。

Ajax异步可能会造成超时，但外部脚本不会。

既然JSON和javascript分不开，且JSON的格式与JS中对象的格式相类似，那么可以通过一个微妙的方法来解决。把bglist.json转换成bglist.js，这样既能解决现有问题，还可以使列表在DOM加载完成前载入，岂不美哉？

bglist.js:

1
2
3
4
5
6
7
8
9
var list = {
	Pix:[
		['...','...']
	],
	mPix:[
		['...','...']
	]
}

除了把对象的引号去掉了，其他的都不变。

在主题_config.yml中设置引入脚本：

1
<script src='/resources/bglist.js'></script>
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
//……

function SetBG(imgurl){	$('#web_bg').css({'visibility':'true','background-image':"url('"+ imgurl +"')"}) }

var CDN = "https://kawashiro_ryofu.gitee.io/blogimagerc/moebg/"
var PIXIV_ID = ''
var URL = ''
var BGReady = new Boolean(undefined)

function ChangeBG(){
	if(list != undefined){
		var r = Math.round(Math.random()*16384)
		
		//区分屏幕
		if(screen.width / screen.height <= 1){
			URL = CDN + list.mPix[r % list.mPix.length][1]
			PIXIV_ID = list.mPix[r % list.mPix.length][0]
		}else{
			URL = CDN + list.Pix[r % list.Pix.length][1]
			PIXIV_ID = list.Pix[r % list.Pix.length][0]
		}
		
		SetBG(URL)
				
		$.snackbar({content: '<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.3/css/all.css" rel="stylesheet"> 背景图片Pixiv ID: <a href="'+ URL +'" target="_blank">'+PIXIV_ID + '</a>'});
		
		BGReady = true
		
	}else{
		$.snackbar({content: '<i class="fa fa-exclamation-triangle" aria-hidden="true"></i> 背景图片载入失败'});
		BGReady = false
	}
}
//……

对比

旧的方式实现的随机背景会有好几秒的延迟（不可避免的），且在目前处于罢工状态，切换背景图片也会有一定时间的延迟。

新方式实现相较于旧的实现方式要快几秒。