Javascript / DOMImageObject ondata事件

Question

是否有可能（或有技术）为 DOM图像元素获取image.ondata事件客户端？ Aka，类似于onload。

问题背景
标准'jpeg渲染到浏览器图像元素从上到下，一次像素行。玩这个会很有趣：向下滑动动画;在时间画块。

可能的解决方案
从服务器获取base64或二进制数据并在Canvas元素上呈现。还有其他想法吗？任何人都会在*之前做到这一点吗？

*是的，这是作弊，但如果你已经这样做了，它会省去我重新发明轮子。

Answer 1

我知道在图像数据到达时无法对图像进行自定义渐进式渲染。您可以做的是让图像不显示，等待整个图像被加载（通过onload事件），然后自定义显示图像。

可以通过多种方式完成自定义显示，例如可用于浏览器的许多基于javascript / CSS的幻灯片。

1. CSS过渡可用于执行各种渲染（在现代浏览器中）。 IE有自己的一组过滤器转换，可以在IE中使用（因为它还没有CSS3转换）。
2. 可以使用图像的大小调整和图像上方对象的移动/大小调整来构建基于Javascript的过渡。例如，你可以做幻灯片，擦拭巾，百叶窗等......
3. 您可以使用画布自行绘制图像的任何部分。