SCCOTTT SCCOTTT - 2 months ago 8x
Javascript Question

Large images paint-in slowly in Chrome, progressively from top to bottom

I'm loading some quite large images (e.g., 5000×4000, 44MB PNG) into a locally running Chrome web application, and I'm seeing the images get "painted" in slowly, from top to bottom (like an image may load slowly over a slow connection on the internet).

I'd like to wait til these images are fully rendered before fading them in. All of the typical means I have of waiting for an image to be loaded are failing me, though. My load event handlers fire, the full file size of the image is loaded, the image reports the correct height, but quite often, the image is only partially rendered and is still painting in from the top.

To make matters worse, Chrome takes an inconsistent amount of time to paint the image in. Sometimes the image is ready immediately—other times it takes almost 10 seconds. And I really can't wait an extra 10 seconds every time to make sure the image is ready to display.

Is there any event I can listen for to know when the image is fully painted in? Or is there any property I can be observing to know what amount of the image is displayed?


As rightly pointed out by @Mike C you can add the image on the DOM once it's fully loaded, like he's done in his example.

var img = new Image();
img.src = '';
img.onload = function() {
    var loadingEl = document.querySelector('p');