首页
前端开发
Javascript
框架加载时的Loading效果与Firefox兼容性优化

框架加载时的Loading效果与Firefox兼容性优化

0 次浏览 0 条评论
html
html

框架加载时的 loading 效果，尤其在 Firefox 上兼容还不错的，推荐你可以参考一下。如果你之前在 Firefox 下碰到过 loading 卡顿或样式乱的问题，这个实现方式挺稳的，样式渲染也干净。适合嵌套路由、SPA 首屏加载的时候用。

使用 纯 CSS+少量 JS 实现，响应也快。整个 loading 样式是简洁的转圈动画，效果跟 Unity 的 Circle Loading 有点像，不过这个更偏网页风。你也可以加个 logo 做品牌首屏，有仪式感。

如果你想要做点不一样的加载体验，也可以看看 Medium 风格的加载，渐变+骨架屏的组合，用户体验会更好。

浏览器兼容性方面，这个方案在 Chrome / Firefox / Edge 上测试都没大问题，尤其对 Firefox 下 transform 和 opacity 的兼容做了，样式表现还挺一致。

代码结构也清爽，loading 容器和动画是分开的，挂在主布局里就行，比如在 index.html 里加个

，配上样式，加载期间直接显示。

如果你用的是 Webpack / Vite，可以在入口 JS 里写一个 setTimeout 模拟加载，再手动隐藏 loading 层。

window.addEventListener('load', function () {
  setTimeout(function () {
    document.getElementById('loading').style.display = 'none';
  }, 1000);
});

如果你在做 SSR 或 SEO 优化，记得 loading 层别写太复杂，越轻越好。还有哦，加载动画别一直转，转太久用户也烦。

想深入挖的话，可以看看 Chrome 和 Firefox 并行加载扩展 的原理，也能给你些思路。

html 文件大小：1.22KB