1

i'm having a hard time searching for insights on how to achieve this since so often people are trying to accomplish the opposite. i'm interested in slowing down the browser during the graphic rendering process, so it's possible to see how a graphic is rendered step-by-step (what direction they are drawn in, how color is applied, etc.).

for instance, i'm wondering how a simple graphic like this gradient:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAYAAAAbb8MkAAAAb0lEQVQYV03HUQbCAACA4T12g26wI3SDXjNmIpOYiSQjGUkiGZNEMpKMJNIh8731P3z8QfBfx3QRooc+BogQI8EQI6QYY4IMOaaYYY4FCiyxQok1Nthihz0OqFDjiBPOuOCKBjfc8UCLJ15444PvD9r8FUNlxDKTAAAAAElFTkSuQmCC

is rendered on screen over time. i found this question:

Slow down browser rendering

and tried to follow the solution with the dev tools, but i think such a simple graphic renders too fast to even see any progression. i'm wondering if theres a script i can run that may slow things down, or some other solution to do this.

any help is much appreciated. thank you!

Robert Longson
  • 118,664
  • 26
  • 252
  • 242
christopher
  • 137
  • 8
  • you can't. browsers aren't made for that. even if you slow it down, it simply won't update for every little bit of progress. that's not how software works. -- you would want to read all about the PNG file format. then you'd want to either modify an existing decoder or write your own, so you can show the picture after every step you care to break the process into. – Christoph Rackwitz May 17 '22 at 09:20
  • a raster image such as the one in this question is simply blitted to the screen in one go, there's only one step so nothing to slow down. – Robert Longson May 17 '22 at 12:34
  • thank you for your responses! this really helps set me on the right track. – christopher May 18 '22 at 18:49

0 Answers0