前言
随着互联网的发展，单页面应用（Single Page Application，以下简称 SPA）的应用越来越广泛。SPA 通过 AJAX 技术实现动态加载页面，从而提高了用户体验。但是，由于 SPA 的特性，页面切换时可能会出现长时间的白屏或者 Loading 界面，影响用户体验。因此，本文将介绍 SPA 应用中 Loading 优化方案的实现。
优化方案
1. 骨架屏
骨架屏（Skeleton Screen）是一种常见的 Loading 优化方案。骨架屏是指在页面加载时，先展示一个简单的页面骨架，再通过 AJAX 技术加载数据，最后再渲染页面。这样可以让用户在页面加载过程中看到一些内容，从而减少白屏时间。
实现骨架屏的方式主要有两种：
- 纯 CSS 实现
- JavaScript 实现
纯 CSS 实现的骨架屏主要是利用伪元素和动画实现。例如：
-- -------------------- ---- ------- -------- - ----------------- -------- --------- --------- --------- ------- - --------------- - -------- --- -------- ------ --------- --------- ---- ------- ----- -- ------ ----- ------- ------ ----------------- ------------------ ------ ------- --- ------- ---- ------- ---- ------- ------ ---------- ------- ---- ----------- --------- - ---------- ------- - -- - ---------- ------------------ - ---- - ---------- ----------------- - -展开代码
JavaScript 实现的骨架屏主要是利用 DOM 操作实现。例如：
-- -------------------- ---- ------- ----- ------- - ------------------------------ --------------------------------- ----- ------- - ------------------------------ --------------------------------- ----- ------- - ----------------------------------- ----------------------------- ----------------------------- -- ---- -------------------------------------- -------------- -- ---------------- ---------- -- - -- ---- ----------------- - - ---- --------------- -- ----------------------------------- ----- -- -- -- ------- -- ----------------------------- ---展开代码
2. 预加载
预加载（Preloading）是指在页面加载时，提前加载需要用到的资源，例如图片、CSS 和 JavaScript 文件等。这样可以让用户在页面切换时更加流畅，减少白屏时间。
实现预加载的方式主要有两种：
- HTML 标签实现
- JavaScript 实现
HTML 标签实现的预加载主要是利用 link 和 img 标签的 rel 属性实现。例如：
<head> <link rel="preload" href="styles.css" as="style"> <link rel="preload" href="app.js" as="script"> </head> <body> <img src="loading.gif" alt="Loading" rel="preload"> </body>
JavaScript 实现的预加载主要是利用 Image 和 XMLHttpRequest 对象实现。例如：
-- -------------------- ---- ------- ----- ------ - - ------------- ------------- ------------ -- ----- --- - --- ----------------- --------------- ------------- ----------- ---------------------- - ---------- - -- --------------- --- - -- ---------- --- ---- - ----- ---- - ----------------------------- -- -- --- - ---------- -- ----- ---- - ------------------------------- -------- - ------------- --------- - ------------- -------------------------------- ----- ------ - --------------------------------- ---------- - --------- ---------------------------------- -- ---- ------------------ -- - ----- --- - --- -------- ------- - ---- --- - --展开代码
总结
本文介绍了 SPA 应用中 Loading 优化方案的实现，包括骨架屏和预加载。骨架屏可以让用户在页面加载过程中看到一些内容，从而减少白屏时间；预加载可以让用户在页面切换时更加流畅，减少白屏时间。在实际开发中，可以根据具体情况选择合适的 Loading 优化方案，从而提高用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65bf07e7add4f0e0ff8910e3
