Question

Is it possible (or is there a technique) to get an image.ondata event client side for a DOM Image Element? Aka, something similar to the onload.

Question context
Standard ‘jpeg’s render into a browser Image Element from top to bottom, pixel row at a time. It would be fun to play with this: animate the swiped down; draw in blocks at time.

Possible solution
Grab a base64 or binary data from the server and render on a Canvas Element. Any other ideas? Anyone does this before*?

*yeah that is cheating, but if you’ve done it already it would save me reinventing a wheel.

Answer 1

I know of no way to do custom progressive rendering of an image as the image data arrives. What you can do is have the image not displaying, wait for the entire image to be loaded (via onload event) and then do custom reveal of the image.

That custom reveal can be done a number of ways like many of the javascript/CSS based slideshows available for the browser.

1. CSS transitions can be used to do a wide variety of renderings (in modern browsers). IE has it’s own set of filter transitions that can be used in IE (since it doesn’t yet have CSS3 transitions).
2. Javascript based transitions can be built using a combination of sizing of the image and moving/sizing of objects above the image. For example, you can do slides, wipes, shutters, etc…
3. You can do your own drawing of any part of the image using canvas.