SPA 应用中 Loading 优化方案的实现-JavaScript中文网-JavaScript教程资源分享门户

前言

随着互联网的发展，单页面应用（Single Page Application，以下简称 SPA）的应用越来越广泛。SPA 通过 AJAX 技术实现动态加载页面，从而提高了用户体验。但是，由于 SPA 的特性，页面切换时可能会出现长时间的白屏或者 Loading 界面，影响用户体验。因此，本文将介绍 SPA 应用中 Loading 优化方案的实现。

优化方案

1. 骨架屏

骨架屏（Skeleton Screen）是一种常见的 Loading 优化方案。骨架屏是指在页面加载时，先展示一个简单的页面骨架，再通过 AJAX 技术加载数据，最后再渲染页面。这样可以让用户在页面加载过程中看到一些内容，从而减少白屏时间。

实现骨架屏的方式主要有两种：

纯 CSS 实现
JavaScript 实现

纯 CSS 实现的骨架屏主要是利用伪元素和动画实现。例如：

.loading {
  background-color: #f2f2f2;
  position: relative;
  overflow: hidden;
}

.loading:before {
  content: "";
  display: block;
  position: absolute;
  top: -150px;
  left: 0;
  width: 100%;
  height: 150px;
  background-image: linear-gradient(to right, #f2f2f2 0%, #e6e6e6 20%, #f2f2f2 40%, #f2f2f2 100%);
  animation: loading 1.5s ease-in-out infinite;
}

@keyframes loading {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

JavaScript 实现的骨架屏主要是利用 DOM 操作实现。例如：

const loading = document.createElement("div");
loading.classList.add("loading");

const content = document.createElement("div");
content.classList.add("content");

const wrapper = document.querySelector(".wrapper");
wrapper.appendChild(loading);
wrapper.appendChild(content);

// 加载数据
fetch("https://api.example.com/posts")
  .then(response => response.json())
  .then(data => {
    // 渲染页面
    content.innerHTML = `
      <ul>
        ${data.map(item => `<li>${item.title}</li>`).join("")}
      </ul>
    `;
    // 移除 Loading 界面
    wrapper.removeChild(loading);
  });

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 对象实现。例如：

const images = [
  "image1.jpg",
  "image2.jpg",
  "image3.jpg"
];

const xhr = new XMLHttpRequest();
xhr.open("GET", "data.json");
xhr.send();
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const data = JSON.parse(xhr.responseText);
    // 加载 CSS 和 JavaScript 文件
    const link = document.createElement("link");
    link.rel = "stylesheet";
    link.href = "styles.css";
    document.head.appendChild(link);
    const script = document.createElement("script");
    script.src = "app.js";
    document.body.appendChild(script);
    // 加载图片
    images.forEach(src => {
      const img = new Image();
      img.src = src;
    });
  }
};

总结

本文介绍了 SPA 应用中 Loading 优化方案的实现，包括骨架屏和预加载。骨架屏可以让用户在页面加载过程中看到一些内容，从而减少白屏时间；预加载可以让用户在页面切换时更加流畅，减少白屏时间。在实际开发中，可以根据具体情况选择合适的 Loading 优化方案，从而提高用户体验。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65bf07e7add4f0e0ff8910e3