【Gridea】图片预览

本站托管于Github Pages，内容由Gridea生成

主题为hexo-next

但我在使用这个主题时，如果当前页面图片过多，点击图片打开的灯箱会很卡

定位到使用fancybox.js实现图片预览的代码($GRIDEA_HOME\themes\gridea-theme-next-master\templates\_blocks\footer.ejs)

<link rel="stylesheet" href="<%= site.customConfig.cdn %>/media/css/jquery.fancybox.css" />
<script src="<%= site.customConfig.cdn %>/media/js/jquery.fancybox.js"></script>
<script>
  let images = document.querySelectorAll(".section img");
  images.forEach((image) => {
    var parent = image.parentElement;
    var next = image.nextElementSibling;
    parent.removeChild(image);
    var aelem = document.createElement("a");
    aelem.href = image.src;
    aelem.dataset["fancybox"] = "images";
    aelem.dataset["rel"] = "fancybox-button";
    aelem.classList.add("fancybox");
    aelem.appendChild(image);
    parent.insertBefore(aelem, next);
  });
</script>

反正就是很卡，浏览器点开图片时资源占用率明显上升，不看fancybox源码也不知道什么问题

忍不了了，在github上找到一个写的比较好的图像预览的js（link），下载下来并把上述代码替换成以下代码，问题就解决了

<script src="<%= site.customConfig.cdn %>/media/js/view-image.min.js"></script>
<script>
  window.ViewImage && ViewImage.init('.section img');
</script>