Paint timestamp

paint-time-polifyll.js

const next_frame = () => Promise(resolve => requestAnimationFrame(ts => resolve(ts));

async function get_img_presentation_time(img) {
  // Wait until image is fully loaded
  await new Promise(resolve => img.complete ? resolve() : img.addEventListener("load", resolve))

  let frame_timestamp = await next_frame();

  // Wait until we have the frame timestamp soonest after the image was decoded.
  // Note that because of main-thread scheduling the implementation might be slightly different than the polyfill
  let decoded = false;
  img.decode().then(() => { 
    decoded = true; 
  });

  while (!decoded) {
    frame_timestamp = await next_frame();
  }
  
  return frame_timestamp;
}

I think conceptually this is useful.

I think there are certain expectations here:

• This is called immediately after image is attached to the DOM and isn't lazy-loaded, etc.
• Scheduling of the img.decode() callback or the next rAF call, isn't held back by other main thread work.

In other words: this polyfill might suffer from issues that a browser internal implementation might not suffer from.

correct, it wouldn't be a 100% polyfill, but it demonstrates something very close.

I think conceptually this is useful.

I think there are certain expectations here:

• This is called immediately after image is attached to the DOM and isn't lazy-loaded, etc.
• Scheduling of the img.decode() callback or the next rAF call, isn't held back by other main thread work.

In other words: this polyfill might suffer from issues that a browser internal implementation might not suffer from.

correct, it wouldn't be a 100% polyfill, but it demonstrates something very close, and the fact that this polyfill exposes just as much about the image as a browser implementation would.

Updated a bit and added comments