Q:

Very large image displaying progressive

I'm trying to load in some decently large images into a web application. The largest of these images can be 2800x2800. 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 2800x2800 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

A:

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)

