how to I avoid images "jumping" when i load an image via javascript

I have a number of images that are lined up together relative u开发者_如何学Pythonsing css, etc.

I have this code in a javascript function after I change a select dropdown:

$("#imagePlaceholder").html("<img src='/Content/Images/image1.png' />");

The issue is that while the image is being downloaded, the rest of the images sort of "jump" up a bit and move over and them they move back once the image is downloaded to the client.

So it looks fine once the image has been download but I want to come up with a way to avoid that "jerkyness" during the transition.

Is there a standard way or best practice for this?

You need to set the width and height of the img. The browser is trying to compensate for the image (hence the "jerkiness") but it can't do so smoothly without knowing how much space the image is going to need.

Or, load the images into a javascript image object and don't insert them into the page until they are loaded. This might work better if you don't know the size of the images ahead of time.

var img = new Image();
img.onload = function () {
    // after it's loaded successfully here, 
    // you can insert it into the DOM with no jerkiness
}
img.src = "xxx";

You need to set the height and width of $("#imagePlaceholder") before any dynamic loading. Also, you're better off having the img have an id with a blank image (transparent 1x1 pixel) and then simply use: $("#imgId").attr("src","newimage.png");

try setting just the src attribute on the image element like noted. if it is recalculating off the old image properties maybe it wont blank them first.