在 DOM 加载之前处理来自服务器的 socket.io 消息或让 DOM 等到所有消息都被处理？

Question

我一直在研究如何让浏览器 DOM 等待加载，直到它接收并处理来自服务器的所有 socket.io 消息。

假设我让服务器从 50 个数组中向浏览器发送每个 cat jpeg URL，其中目标图像的大小不同：

catimgurl.forEach(function(cat) {
    socket.emit('cat', cat)
}

我让浏览器在客户端等待这些 URL 来处理图像 URL 并将它们显示在 <img> 标记中。但我不希望页面显示，直到所有图像都完成下载到浏览器缓存然后准备好在 DOM 准备好后进行渲染。

$(document).NOTready({
    socket.on('cat', function(catimgurl){
        $("<img src='"+catimgurl+"'/>").appendTo("body")
    })
})

现在浏览器已经接收并缓存了所有的猫图像，DOM 可以加载并显示图像。

我正在查看此堆栈中的答案：https://stackoverflow.com/a/13911598/1551027，但使用此代码，它会在文档未加载时发出警报，并且在完成加载时永远不会发出警报。所以我不认为我可以使用它。

我还想知道是否需要开始研究使用 angular、react 或 vue 之类的服务器端渲染。

感谢任何方向/见解！谢谢

Answer 1

首先，我建议您向发送一组 URL 的客户端发送一条初始消息：

// send initial array of image URLs to the client all at once
socket.emit('catInitial', catimgurl);

其次，在客户端中，您可以设置页面内容，使其最初隐藏在具有如下 CSS 规则的容器 div 中：

#pageContainer {display: none;}

然后你收到并处理catInitial消息后，就可以显示内容了。

// listen for initial image array message
socket.on('catInitial', function(catImgArray) {
   // make sure document is loaded before trying to insert the images
   $(document).ready(function() {
       // insert all the images
       catImgArray.forEach(function(catimgurl) {
           $("<img src='"+catimgurl+"'/>").appendTo("#pageContainer");
       });
       // now show the page content here by reversing the default CSS setting
       $("#pageContainer").show();
   });
});

您甚至可以更花哨一点，最初显示一些初始“页面加载...”消息，然后在接收到图像内容后，隐藏“页面加载...”内容并显示常规页面内容。