ImQi1
封面
站点开发手记(3)
为ImQi1添加了轮播图支持、优化速度。

前段时间给文章一口气添加了五个功能支持之后,我本以为我的想法到瓶颈了,没想到今天凌晨2点醒来,睡不着打开浏览器浏览自己的网页的时候,能想到新增一个有趣的功能。

昨天在浏览“兴趣”和“图片”分类时,总觉得它们的内容太少,没有阅读价值。

兴趣往往展示的是我喜欢的东西,可能会很冷门,不吸引大家观看,如音乐、影视剧;图片展示的则是我觉得很震撼的东西,可能是个大场面【如毕业季时组团门口的行李寄运】,可能是风景,也可能是个小物品【如小积木拼成的钢铁侠】。

如何将它们做得吸引人呢。昨天脑子灵光一闪,想到了将它们和轮播图结合起来。

在看到【风记星辰】博客中【钢铁洪流 - 中国工业博物馆】文章展示了强大的图片排版,我就在想怎么给我的网站加个轮播图功能呢。我立了几个方案,有在文章列表中以轮播图展示的、有在文章正文内展示的、有丰富文章图片布局的(如一行两列、一行三列等表格布局,或类似【关于】界面的错乱排布)。最后从实现难度、实用性、简洁美观等多方面考虑,最后觉得从封面下手,丰富一下封面的功能。

借助于 swiperjs 的强大功能,我将它和 RemixIcon 结合起来,做了个简单的封面轮播图效果。

可前往 Minecraft建筑1 查看效果,可能需要强制刷新浏览器缓存。

这里不得不提一下,在实现这部分功能的时候,需要同时改动 FancyBox(图片幻灯片)、LazyLoad(图片懒加载)两个插件,然后再加上 SwiperJS,可累死了。


有些朋友说评论区需要改改,我也给评论区简单修了下样式。

最开始杜老师说评论没有嵌套,看起来很别扭。但是评论每多一层回复,按照递归,就要逐层向内缩进,若页面过窄且回复层级过深,就会造成显示宽度的问题。所以我最开始没有采用嵌套的方式突出评论回复的关系,而是采用了 Saammaa 使用的“串串”方式,后来又改成了现在的样式。

“串串”就是穿成串,因为看起来很像串。

我妈也说现在的样式最简洁。


随着使用的插件多了起来,网页刚开始要加载一堆 JS。我现在用到的插件暨加载的 JS/CSS 有:用于播放音乐的 Howler、Aplayer、Meting;用于播放视频的 DPlayer、用于解析代码块的 Prism,等等。且JS还经过混淆,多达十几个JS和CSS,严重拖慢了站点的运行速度。于是我将它们处理成异步的。

这里可以简单介绍一下如何异步加载 JS 和 CSS,以 JS 为例,定义一个 loadJavaScript 函数。

function loadJavaScript(href, callback) {
  let scriptElement = document.createElement("script");
  scriptElement.src = href;
  c.onload = callback;
  document.head.appendChild(c);
}

在存在对应的元素时加载 JavaScript 并设定一个已加载的标志。调用时,第一个参数为 JavaScript 的路径,第二个参数为加载完 JavaScript 后应执行的函数。

if (document.querySelector(".example-element") && "undefined" == typeof scriptLoaded){
  loadJavaScript("https://example.com/example.js", function() {
    init();
    window.scriptLoaded = 1;
  })
} else init()
这里需要注意一下,此方法加载的JavaScript和回调函数均为异步。若动态导入JavaScript后依赖这些JavaScript的代码有先后顺序,则不能采用此方法。因为异步执行的代码无法保证执行顺序,只有同步执行可以。

异步加载的JavaScript异步加载的JavaScript.webp

从上图可以看到,在页面加载初只加载3个CSS和6个JS(我还是觉得很多,但不能再少了),其他的JS都在页面有对应元素时再导入,减少了页面初期加载需要等待的时间,配合Pjax的无刷新,让浏览体验更上一层楼。

评论
评论即代表你已阅读并同意评论协议
  1. Xzoawa
    Xzoawa 4个月前

    😁

双击可关闭搜索,或者点我关闭
内容加载中...