Hexo解决进入页面动画加载缓慢问题

是否开启了进入页面启动加载动画，并且加载非常缓慢？

导致这个的原因大致有：

  1. 动画加载费时
  2. 浏览器需要将网站整体的元素都初始化完成，导致耗费时间
  3. 浏览器初始化网站时需要返回一个值，但一直没有返回
  4. 你的网站它心情不太好🧐

Anyway，想到一个粗暴但简单的方法来解决这个问题。

解决办法

打开 \themes\butterfly\layout\includes\loading\fullpage-loading.pug文件

将标注//新增的两行代码添加进去

1.旧版本Hexo解决办法

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
#loading-box
  .loading-left-bg
  .loading-right-bg
  .spinner-box
    .configure-border-1
      .configure-core
    .configure-border-2
      .configure-core
    .loading-word= _p('loading')

//- script. //原代码
script(async). //新增
  const preloader = {
    endLoading: () => {
      document.body.style.overflow = 'auto';
      document.getElementById('loading-box').classList.add("loaded")
    },
    initLoading: () => {
      document.body.style.overflow = '';
      document.getElementById('loading-box').classList.remove("loaded")

    }
  }
  window.addEventListener('load',()=> { preloader.endLoading() })
  setTimeout(function(){preloader.endLoading();}, 5000); //新增

  if (!{theme.pjax && theme.pjax.enable}) {
    document.addEventListener('pjax:send', () => { preloader.initLoading() })
    document.addEventListener('pjax:complete', () => { preloader.endLoading() })
  }

这两行代码的意思是：

在加载动画时，采用的是异步加载方式。如果超过5秒没有反应，则认为超时。

2.新版本Hexo解决办法

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
#loading-box
  .loading-left-bg
  .loading-right-bg
  .spinner-box
    .configure-border-1
      .configure-core
    .configure-border-2
      .configure-core
    .loading-word= _p('loading')

script.
  (() => {
    const $loadingBox = document.getElementById('loading-box')
    const $body = document.body
    const preloader = {
      timeoutId: null, // 新加的，用于存计时器
      endLoading: () => {
        clearTimeout(preloader.timeoutId) // 新加的，用于清除超时保护
        $body.style.overflow = ''
        $loadingBox.classList.add('loaded')
      },
      initLoading: () => {
        $body.style.overflow = 'hidden'
        $loadingBox.classList.remove('loaded')

        // 新加的，用于设置超时保护，5秒后强制关闭加载动画
        preloader.timeoutId = setTimeout(() => {
          preloader.endLoading()
        }, 5000)
        
      }
    }

    preloader.initLoading()
    window.addEventListener('load', preloader.endLoading)

    if (!{theme.pjax && theme.pjax.enable}) {
      btf.addGlobalFn('pjaxSend', preloader.initLoading, 'preloader_init')
      btf.addGlobalFn('pjaxComplete', preloader.endLoading, 'preloader_end')
    }
  })()

参考文章：Loading Animation | Akilarの糖果屋