4 ms·
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 tw
by a-priori 18y 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 18y agoI 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 18y agothat's called a sprite, that giant jquery ui file with multiple images, in case you want to find more info.