LiveReload的自刷新问题

最新推荐文章于 2022-01-15 18:02:19 发布

转载最新推荐文章于 2022-01-15 18:02:19 发布 · 686 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5a7eb8316fb9a0634417dc81

文章标签：

#python #前端 #ViewUI

本文介绍了一种使用JavaScript小技巧来优化LiveReload插件的方法，解决了前端开发中因编译未完成而导致的页面刷新问题。

当我们使用LiveReload来进行编辑器保存后浏览器的自动刷新对于前端开发人员来说是个解放劳动力的利器，但是对于还要进行编译的语言还存在一些小问题（可能是因为我没有FQ安装，而是直接下载的插件手动插入的问题，没有配置什么的）例如像pug,less和sess等保存后需要命令行或其他工具进行编译形成html，css。这时候就出现了一个问题，当代码保存的瞬间，LiveReload就会触发浏览器进行刷新，这时那些正在编译的文件可能还没有编译成功，所以浏览器引入的还是原来的文件导致页面没有变化，而需要再次按保存键才会再次刷新出来。对于我这种有强迫症的人来说简直抓狂，所以可以用一个js小技巧来解决这个问题。引入以下js文件即可

function againLoad() {
	if(window.name != 'thepage') {
		window.name = 'thepage';
		location.reload();
	} else {
		window.name = 'otherpage';
	}
}
againLoad()
复制代码

这里利用window.name做一个页面记录进行二次刷新,这时基本HTML和CSS已经编译完成了，如果电脑性能实在不好 - -! ，就加个settimeout即可。希望能帮助到一些同学!