Question

I have a number of images that are lined up together relative using 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?

Answer 1

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";