在数据加载之前在模板中显示文本 - Javascript

有时候，我们需要在数据加载之前显示一些占位文字或者加载中的文本提示。这在网速较慢或者异步加载数据时特别适用。本篇文章中，我们将介绍怎样在Javascript中实现在数据加载之前在模板中显示文本。

方法一: 使用CSS（推荐）

可以使用CSS实现很多图形化效果，也包括在数据加载之前在模板中显示文本。最简单的做法是使用伪元素 ::before 或者 ::after 。

通过在 HTML 元素上添加伪元素，我们可以使用 CSS 设置一个没有间隔从而不影响原本布局或者内容的文本信息。你可以设置 content 属性来添加占位符或者加载中的文本，并使用 position: absolute 以便于它不影响布局。

下面是示例代码：

.loading::before {
    content: "Loading...";
    position: absolute;
    top: 0;
    left: 0;
    background-color: #fff;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

在上述代码中，.loading 是一个类名，你可以应用它到你的模板中的相应元素上。CSS代码中的 ::before 伪类将会作为此元素的第一个子元素生成，然后它会使用白色背景覆盖所有内容，在中心显示 “Loading…” 文本。display: flex align-items: center 和 justify-content: center 帮助我们实现文本垂直居中和水平居中。

方法二：使用JS

我们可以在Javascript代码中使用 DOM 方法来动态地添加文本信息，然后在异步加载数据后删除相关文本信息。这种方法比起使用CSS更加灵活，允许我们添加动态信息，或者处理更为复杂的加载过程。

示例代码如下：

var loadingElement = document.createElement('p');
loadingElement.textContent = 'Loading...';
document.querySelector('.container').appendChild(loadingElement);

//等待异步请求完成后
function loadComplete(data){
  //处理异步数据
  // ...
  //加载完成后删除占位元素
  document.querySelector('.container').removeChild(loadingElement);
}

上述代码中，我们创建并添加一个文本元素 .container 中，然后等待异步请求完成后删除元素。你可以修改字符串 Loading... 为任意文本信息。

尽管这种方法为我们带来了更多的灵活性，但是有些情况下你可能需要使用CSS来达到更为便捷的加载效果，例如居中显示、更复杂的动画效果等等。

结论

在本文中，我们讨论了怎样在数据加载之前在模板中显示文本。我们介绍了两种方法：使用CSS和使用Javascript。使用CSS可以提供简单的文本占位符和加载效果，而使用Javascript则更为灵活，可以适应更为复杂的场景。你可以根据自己的需求选择适合的方法。