0

This may sound counter intuitive considering the nature of web sockets, but I have a need to transmit numerous repetitive socket emits to the client. Once finished, I want to load the HTML that displays the messages to the client. I'm not quite sure how to go about this, or if it's the wrong idea.

The scenario, more specifically is that I am scraping meta tags from various submitted URLs, writing the image meta property value to a dadabase, ordering them by some criteria, then emitting all of the images to the client to display them.

What I found is happening is images that take longer to load are screwing up the order they should be displayed in, despite the correct order with the socket emits. Since the image load time is outside of my control, I'm looking for ways to still accept the socket messages, but pre-load the images before displaying all of the content.

For example:

Server

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)
}

Browser

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
})

Can I do something with $document.ready() here?

I've reviewed the following stack but because I'm using sockets, my use-case is different and it doesn't seem to apply: Official way to ask jQuery wait for all images to load before executing something

Dshiz
  • 3,099
  • 3
  • 26
  • 53

1 Answers1

0

My preferred way to get a better rendering result is to use a placeholder image that resides in the browsercache and then replace all images with the correct src.

Even with a width, height and an alt attribute your layout grows smoother.

Also there are a couple of ways to preload an image with javascript. In your jQuery code you could create an img for itself, set src and wait for all load events manually before you display it. Onready does not help you here. Even better, if you can use avatars (blank images), you can use observers and a javascript oneliner replace it with the correct images.

Enchanter
  • 7
  • 9
  • The image width is constant, but the height is variable. Would your placeholder idea still work with a variable height image? – Dshiz Apr 06 '18 at 13:51
  • A website is as height as the content. So it wouldt never can give a perfect result. If you can manage it, that you know the height of your images before they load, it couldt work. The placeholder image couldt be a blank gif or something else. The resizing of the image to a preffered height is too fast to be visible. – Enchanter Apr 06 '18 at 13:56
  • I don't think this will work for me. Because my placeholder image loads fastest, some of the older images that can't load at all (due to some error) are loading in the first position over a newer image that can load. – Dshiz Apr 06 '18 at 14:05
  • It sounds like waste, when you wouldt create img tags for images that couldnt load. But if you couldnt prepare a screen for your results. It is not the right way for you. – Enchanter Apr 06 '18 at 14:35
  • Your answer has given me some new ideas though.. I found that once the images get pushed to the browser and all have loaded, after refreshing once, everything is in the correct order. I'm probably going to add a 'loading' message, then refresh the container div once all assets have loaded. – Dshiz Apr 06 '18 at 14:47
  • Since the first css versions, browsers learned to rerender stylings and elements. Try to avoid element nesting, tables and lists in this case. Also the image requests couldt be cached after the first round and a prepared styling renders prepared images. Shouldt give a good result.. – Enchanter Apr 06 '18 at 15:26