4 ms·

Did you figure out how they're transforming the serialized image data into real images? I remember there was something like a data-attribute in the img-tag back

• Glide 17y ago
  They have an object tag with base64 encoded images.
• a-priori 17y ago
  It looks like they do it by replacing the image tags in the DOM with an object tag pointing to a "data:" uri containing the Base64-encoded image data. Here's two pieces of relevant code, first where they fire off the listeners for the DOM objects, and second where they replace the DOM objects: http://github.com/digg/stream/blob/66dcce320c73b109cd5836e44ca2163c235906dd/js/Stream.js#L222 http://github.com/digg/stream/blob/66dcce320c73b109cd5836e44... http://github.com/digg/stream/blob/23a411eb0cc00048bbb09088937ab556c5cebe26/imageDemo.html#L40 http://github.com/digg/stream/blob/23a411eb0cc00048bbb090889...
  • Glide 17y ago
    I don't think they're replacing any objects. Every time a Content-Type of image/gif is encountered it appends a new object to #stream with the image data inlined. I was really confused at the object tags at first, so I went ahead and copy pasted one of the object tags with image data into a blank html and loaded it into firefox. The image showed up fine. This is an extremely clever solution. I know jQuery UI's icons are in one giant image file and background offsets are used to display the correct icon, but this is probably better for a dynamic solution because the amount of CPU it would take to stitch upwards of 100 images together.
    • smhinsey 17y ago
      that's called a sprite, that giant jquery ui file with multiple images, in case you want to find more info.