Question

我是前端的新手，如果这是非常基本的话，请道歉。

我正在尝试创建一个用户可以上传和存储自己文件的Web界面。我有基本功能，但目前我从Firebase数据库生成的元数据表等元素在每页加载页面的其余部分之后加载了很多。

我尝试过使用jQuery预加载器效果，但无论出于何种原因我都无法将Firebase的内容预加载 - 在预加载器完成后它总是出现。我还考虑过在本地保存元数据以加快速度，但这听起来像是不好的做法/安全问题。我想我只是要求一些指示，因为我不确定我在做什么。

以下是一些相关代码：

function main() { firebase.auth().onAuthStateChanged(function(user) { if (user) { // user is signed in. var uid = user.uid; var displayName = user.displayName; var email = user.email; document.getElementById('user-name').textContent = displayName; // populate table from database metadata var docRef = db.collection('users').doc(uid).collection('uploaded-files').get().then(function(querySnapshot) { querySnapshot.forEach(function(doc) { // generate rows } } } } } window.onload = function() { main(); };

提前感谢您的帮助。

Answer 1

如果你认真做专业，你需要将所有js（firebase sdk和你的script.js）和css连接成一个缩小的文件。在HTTP会话建立时间方面，每次文件获取都很昂贵。 ...所以只有一个外部的js和css文件。

Grunt是我用来自动化的东西。见here for an EZ quickstart Grunt guide。 CSS也一样。只有一个。甚至可以最小化HTML。

将script.min.js标记放在关闭的body标记内，并完全删除.onload函数。

在您的HTML UI中将加载程序显示硬编码并在获取结果后将数据交换出来。这样用户就知道你的页面/应用正在加载。

至于响应能力，Google's tutorial on building Progressive Web apps讨论了在会话/本地存储中缓存数据，以便在异步提取解析时，即使数据过时，也可以立即启动UI。

.loading-dot {
  animation: blink 2s;
  animation-iteration-count: infinite;
  animation-direction: normal;   
}
.loading-dot:nth-of-type(1){
  margin-right: 2.5em;
}
.loading-dot:nth-of-type(2){
  margin-right: 2em;
}
.loading-dot:nth-of-type(3){
  margin-right: 1.5em;
}
.loading-dot:nth-of-type(4){
  margin-right: 1em;
}
.loading-dot:nth-of-type(5){
  margin-right: .5em;
}
@keyframes blink {
  0%   {opacity:0; margin-left:3em; }

  95%  {opacity:1; margin-left:0em; margin-right:-.2em; }
  99%  {opacity:0; }
  100% {margin-left: -1em; margin-right:-.4em;}
}

<span class="loading-dot">.</span>
<span class="loading-dot">.</span>
<span class="loading-dot">.</span>
<span class="loading-dot">.</span>
<span class="loading-dot">.</span>

使用javascript元素无缝加载页面的最佳方法是什么？

1 个答案: