Question

我有一个Node.js应用程序，可以从Tumblr加载帖子，然后显示它们当服务器从客户端获取请求时，服务器然后从Tumblr获取最后5个帖子并将它们传递给Jade，Jade呈现模板并转换为HTML，然后将整个内容传递给客户端。

当然，由于从Tumblr加载帖子是异步的，因此客户端第一次访问该页面时，posts对象将为空（因为在从Tumblr接收帖子之前呈现并发送请求）。但是，刷新页面后，posts对象不再为空，页面填充Tumblr的帖子。

现在，就像任何体面的网页一样，如果传递的帖子对象为空或空，我的显示“从Tumblr加载帖子”。但是，由于后期获取方法的异步性，它确实需要页面刷新才能查看帖子。我想避免使用JavaScript刷新页面，所以如何动态加载页面，显示“从Tumblr加载帖子”，同时从Tumblr检索然后更新页面而不刷新？

以下是一些相关的代码段。

post-fetcher方法：

function getPosts() {
    var self = this;
    var posts = {};
    blog.text({limit: 5}, function(error, response) {
        if (error) {
           throw new Error(error);
        }

        self.posts = response.posts;
    });

    if (main.debug) console.log(posts);
    return this.posts;
}

请求处理程序：

app.get('/', function(req, res) {
    res.render('index', {
        title: "My Site",
        posts: getPosts()
    });
});

显示帖子的Jade块扩展名：

if posts == null
  .postContainer#nullPosts
    h1 Still loading!
    p
      | You caught us at a bad time: we're still loading posts from
      | Tumblr. Try refreshing the page in a few seconds.
    p#emote Sorry! (>u///u<)
else
  for post in posts
    .postContainer
      h1
        a(title='View on Tumblr', target='_blank', href='#{post.post_url}')
          if post.title == ""
            = post.timestamp
          else
            = post.title
      p !{post.body}
      p.tags
        for tag in post.tags
          = "#" + tag + " "

Answer 1

Socket.IO可能会为你做到这一点。打开套接字连接并通过它们发送图像。 Socket在一段时间后轮询服务器。直到您没有来自套接字的任何数据，您可以通过显示消息从客户端处理该数据。

第二种方法是从客户端进行ajax get调用，直到没有完成显示加载图像，并在成功块中删除加载图像。

Jade / Node.js：从Tumblr加载帖子时显示加载消息

1 个答案: