How to detect when an image has finished rendering in the browser (i.e. painted)?

Question

On a web app I need to work with a lot of high-res images, which are dynamically added to the DOM tree. They are pre-loaded, then added to the page.

It's one thing to detect when such an image has finished loading, for this I use the load event, but how can I detect when it has finished being rendered within the browser, using Javascript? When working with high resolution images, the actual painting process can take a lot of time and it's very important to know when it ends.

Answer 1

I used requestAnimationFrame to do the trick. After image loaded it will be rendered during the next animation frame. So if you wait two animation frames your image will be rendered.

function rendered() {
    //Render complete
    alert("image rendered");
}

function startRender() {
    //Rendering start
    requestAnimationFrame(rendered);
}

function loaded()  {
    requestAnimationFrame(startRender);
}

See http://jsfiddle.net/4fg3K/1/

Answer 2

I had the same problem. I have created the preloader page with progress bar. When the image is loaded, the white background preloader page disappears smoothly to opacity: 0, but the image is still not rendered.

I have finally used the setInterval, when the image is loaded (but not rendered). In the interval I check the naturalWidth and naturalHeight properties (Support: IE9+). Initialy it equals 0 and when the image is rendered it shows its current width and height.

const image = document.getElementById('image');

image.src = "https://cdn.photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-1.jpg";

image.onload = function () {
  console.log('Loaded: ', Date.now());
  const interval = setInterval(() => {
    if (image.naturalWidth > 0 && image.naturalHeight > 0) {
      clearInterval(interval);
      rendered();
    }
  }, 20);
}

function rendered() {
  console.log('Rendered: ', Date.now());
}

img{
  width: 400px;
}

<img id="image"/>

Answer 3

from mdn,

The MozAfterPaint event is triggered when content is repainted on the screen and provides information about what has been repainted. It is mainly used to investigate performance optimization

Hope you are doing this to gauge performance of the rendered image.

Answer 4

I'd like to propose a modified version of the answer that hovitya provided.

This is the behavior of their answer:

..r........P...................e.P..

• r: execution of our function is requested
• P: browser paints (typically happens 60x per second)
• e: our function is executed

We can improve the behavior and target this result instead:

..r........P.e...................P..

i.e. our custom function is executed almost immediately after the first repaint

This is the code that makes this work:

function afterPaint() {
  // Render complete
  alert("image rendered");
}

// do some DOM manipulation here

requestAnimationFrame(() => {
  // wait until immediately before the next repaint,
  // then schedule a new microtask
  // - which will be executed immediately after the repaint
  queueMicrotask(afterPaint);
});

references

• (abandoned) proposal for requestPostAnimationFrame
• event loop processing model (especially part 7.13)

Answer 5

Update: Do not use this approach - doesn't work in cases where the image dimensions are set to something else than the default

You could set the element's height to auto (with a fixed width) and with a timeout keep on checking of the element's dimensions match with the natural dimensions of the image. It's not the best solution but if you really need to do something after rendering and not after loading, it's a good option.

More or less that's how it could look:

//this is NOT a real code
function checkIfRendered(img, onRender) {
    var elRatio = img.width() / img.height();
    var natRatio = img.naturalWidth / img.naturalHeight;

    if (elRatio === natRatio)
        onRender();
    else {
        setTimeout(function() {
            checkIfRendered(imgEl, onRender)
        }, 20);
    }
}

img.onload(checkIfRendered(img, function() { alert('rendered!'); }));

Answer 6

You need the onload event on the <img> tag. For example:

function loadImage () {
  alert("Image is loaded");
}
<img src="w3javascript.gif" onload="loadImage()" width="100" height="132">

source

If the image is the background of another element, load the image in the background (with a simple Ajax GET request) and when the result comes back, set the background after it has been loaded.