Hacker News Reader

Comment by schtono | Hacker News Reader

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 in the days, but i thought it was deprecated years ago...?

Any hints?

View on HN

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/66dcce320c73b109cd5836e44...

http://github.com/digg/stream/blob/23a411eb0cc00048bbb090889...

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.

that's called a sprite, that giant jquery ui file with multiple images, in case you want to find more info.

They have an object tag with base64 encoded images.

Reply on news.ycombinator.com