Question

I’m trying to load in some decently large images into a web application. The largest of these images can be 2800×2800. I load them in, display, and everything works fine.

My problem is, once they are loaded using:

var img = new Image();
img.src = 'myImageURL';
img.onload = function(){
  //display image
}

The large images display on the page progressively, from top to bottom as if they are being loaded.

I want to remove this visually, and only display them once fully loaded and rendered in the browser.

I cannot change the image sizes either, because this web app is intended for the user to scale the images, all the way up to 100% of original size, so I must load the full 2800×2800 and resize it small.

Does anyone know how I could hide the image until it’s rendered? I can hide it until loaded, but that’s basically what I’m doing and it’s the progressive render display I want to remove.
Thanks

Answer 1

Use the onload attribute on the <img> tag, something like this:

<img src="huge.jpg" style="display:none" onload="this.style.display='block'">

Substitute whatever you want for effects, but onload is your hook.

Demo: http://jsfiddle.net/DfCUQ/1/ ^{(note: update the ?nocache=X in the demo for each time you load it)}