Question

考虑到Web套接字的性质，这可能听起来很直观，但我需要向客户端传输大量重复的套接字发送。完成后，我想加载显示消息的HTML到客户端。我不太确定如何解决这个问题，或者这是错误的想法。

该场景，更具体地说是我从各种提交的URL中抓取元标记，将图像元属性值写入父元素，按照某些标准对它们进行排序，然后将所有图像发送到客户端以显示它们。

我发现正在发生的是需要更长时间加载的图像会搞砸他们应该显示的顺序，尽管套接字发出的顺序正确。由于图像加载时间超出了我的控制范围，我正在寻找仍然接受套接字消息的方法，但在显示内容的所有之前预先加载图像。

例如：

服务器

var data == //json data of all my img URLs with a 'postdate'
var sortJsonArray = require('sort-json-array');
sorted = sortJsonArray(data, 'postdate', 'asc')
sorted.forEach(function(obj) {
    socket.emit(image, obj.image)
}

浏览器

socket.on(image, function(img){
    var $div = $("<div/>")
      .html('<img src="'+img+'"</>')
      $('#picture').prepend($div);  // because of image load time, the results are out of order
})

我可以在这里使用$ document.ready（）吗？

我已经回顾了以下堆栈，但因为我使用套接字，我的用例不同，似乎不适用： Official way to ask jQuery wait for all images to load before executing something

Answer 1

结果不应该为false，但最后一张图像不能显示。发出它？我得到更好的渲染结果的方法是使用在浏览器缓存中抵制的占位符图像，然后用正确的src替换所有图像。即使使用宽度，高度和alt属性，您的布局也会变得更加平滑。还有几种方法可以使用javascript预加载图像。在你的jquery代码中，你不能为自己创建一个img，设置src并在显示之前等待所有加载事件。 Onready对你没有帮助。

等待所有图像加载到浏览器中，然后在套接字发出

1 个答案: