volantis多背景图的优化方案

DearXuan

发布于 2022-01-19 18:59:36

4020

发布于 2022-01-19 18:59:36

文章被收录于专栏：DearXuan的博客文章DearXuan的博客文章

原方案的不足之处

volantis的所有背景图都储存在配置文件中，如果图片过多，就会导致配置文件冗长

实际上，产生随机图的原理是遍历数组并随机交换，因此图片过多时加载速度也会大幅度降低

但是实际上这些图片的地址都高度相似，因此我们可以换个思路，每次生成一个随机数，并动态生成图片地址，这样就大大提高了加载速度，并且省去了填写地址的麻烦

备份

在修改源码之前先备份源文件

命名格式

使用数字命名图片，下标从1开始，例如 “1.jpg”,”2.jpg”。将所有图片上传至网页目录或图床中，请确保所有图片都在同一个文件夹下

修改代码

在_config.volantis.yml或volantis.yml里删除原images下的所有图片地址，改为total

parallax:
  enable: true
  position: fixed       # cover: sticky on the cover.   fixed: Fixed as background for the site.
  shuffle: true         # shuffle playlist
  duration: 60000       # Duration (ms)
  fade: 1500            # fade duration (ms) (Not more than 1500)
  images:               # For personal use only. At your own risk if used for commercial purposes !!!
    total: xxx

其中xxx表示图片的数量，假如你有100张图片，则total为100

打开volantis/layout/_plugins/parallax/script.ejs，如果主题更新导致文件位置改变，可以直接搜索

将代码替换为

<script>
  let total = <%-theme.plugins.parallax.images.total%>;
  let index = Math.floor(Math.random() * total) + 1;
  let IntervalParallax = null;
 
  function parallax(){
    let ParallaxWindow = document.querySelector("#parallax-window");
    <% if (theme.plugins.parallax.position=="fixed") { %>
      ParallaxWindow = document.querySelector("html");
    <% } %>
    Parallax.window = ParallaxWindow;
    Parallax.options.fade = <%- theme.plugins.parallax.fade %>;
    Parallax.cache = 1;
    next_parallax();
    Parallax.init();
    if (total>1) {
      IntervalParallax = setInterval(function () {
        next_parallax();
      }, '<%- theme.plugins.parallax.duration %>');
    }
  }
 
  function next_parallax() {
    if (typeof Parallax == "undefined") {
      return
    }
    <% if (theme.plugins.parallax.position!="fixed") { %>
      if (!document.querySelector("#full")&&!document.querySelector("#half")) {
        return
      }
    <% } %>
    if (total>=1) {
      Parallax.options.src = "你的图片地址" + index + ".jpg";
      Parallax.start();
      index++;
      if (Parallax.cache) {
        fetch("你的图片地址" + index + ".jpg?t=" + new Date().getTime());
      }
    }
  }
  var runningOnBrowser = typeof window !== "undefined";
  var isBot = runningOnBrowser && !("onscroll" in window) || typeof navigator !== "undefined" && /(gle|ing|ro|msn)bot|crawl|spider|yand|duckgo/i.test(navigator.userAgent);
  if (!isBot) {
    volantis.js('<%- theme.cdn.map.js.parallax %>').then(()=>{
      parallax()
    })
    volantis.pjax.send(()=>{
      clearInterval(IntervalParallax)
    },"clearIntervalParallax");
    volantis.pjax.push(parallax);
  }
</script>

将两处中文改为你的图片地址