Question

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

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

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

首先，我建议您向发送一系列网址的客户端发送一条初始消息：

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

然后，在客户端中，您可以设置页面内容，使其最初隐藏在容器div中，并使用CSS规则：

#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();
   });
});

您甚至可以获得一点点发烧友并初步显示一些初始的“页面加载...”消息，然后在收到图像内容后，隐藏“页面加载...”内容并显示常规页面内容。 / p>

在DOM加载之前处理来自服务器的socket.io消息或使DOM等待直到处理完所有消息？

1 个答案: