Javascript 在页面中加载元素时，如何制作此预加载程序

这张来自LinkedIn、Facebook、Discord等网站的图片使用了这种预加载效果，我发现：

但是我找不到更多关于这个的帖子

---

加载占位符并从服务器获取数据，从服务器获取数据后隐藏占位符

//使用timeout来说明延迟
setTimeout（函数（）{
$（'.timeline包装器'）.hide（）；
$（'.show data'）.show（）；
}, 3000);
//从这里的服务器获取数据
//$.post（'getdata.php'，函数（数据）{
////在这里处理您的数据
//隐藏占位符
//$（'.timeline包装器'）.hide（）；
//}）

。时间线项目{
背景：#fff；
边框：1px实心；
边框颜色：#e5e6e9#dfe0e4#d0d1d5；
边界半径：3px；
填充：12px；
保证金：0自动；
最大宽度：472px；
最小高度：200px；
}
@关键帧闪烁{
0% {
背景位置：-468px 0
}
100% {
背景位置：468px 0
}
}
.动画背景{
动画持续时间：1s；
动画填充模式：正向；
动画迭代次数：无限；
动画名称：闪烁；
动画计时功能：线性；
背景：#f6f7f8；
背景：线性梯度（向右，#eeeeee 8%，#dddddd 18%，#eeeeee 33%）；
背景尺寸：800px 104px；
高度：96px；
位置：相对位置；
}

来自服务器的数据