DOM 生命周期事件

  • document.addEventListener('DOMContentLoaded', ...):

    网页在载入的时候首先会解析HTML并构建DOM树。当这一步完成的时候该事件就会触发，此时css可能还没完全加载，其他网页资源如图片等也可能没完全加载完成。

  • window.addEventListener('load', ...):

    当所有网页资源加载完毕的时候触发，一般比DOM树加载晚得多。

  • window.addEventListener('beforeunload', ...):

    当用户要离开界面的时候触发，可能是跳转也可能是主动关闭页面。可以用来保存数据和弹出提示(现代浏览器一般会限制提示内容)

要创建一个加载页面我们一般会用到第二个事件: load。 我们可以创建一个position:fixed的加载页面，然后在监听到页面加载完成的时候将他消除，例如display:none。

在hexo butterfly添加自定义加载页面

仅仅对于hexo: 7.3.0版本

Hexo loading

  1. 找到文件夹 yourBlog/themes/butterfly 打开layout文件夹:

Hexo layout

  1. 打开layout/includes/loading文件夹，里面默认只有 index.pug pace.pug full-page-loading.pug

  2. 创建你自己的my-loader.pug 里面有内联的css和js以及pug格式的HTML。可以直接把你的代码喂给AI转换为PUG格式(和原生HTML CSS JS 没啥区别)。

  3. 把原本的index.pug 里面替换为:

    1
    2
    3
    if theme.preloader.enable
      if theme.preloader.source === 1
        include ./my-loader.pug

最后在terminal hexo cl hexo g hexo s 就可以预览了， 如果效果可以的话hexo d就可以部署。