旧的方案
原理:通过读取/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)
var request = new XMLHttpRequest(); request.open("GET","/resources/bglist.json?t="+Math.random()); request.send();
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({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 }
}
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 } }
|
对比
旧的方式实现的随机背景会有好几秒的延迟(不可避免的),且在目前处于罢工状态,切换背景图片也会有一定时间的延迟。
新方式实现相较于旧的实现方式要快几秒。