Question

I’m having some trouble with a few routines that are using jQuery to dynamically update image elements. An example is a script that replaces a large image, adjusting the dimensions in the process.

$('#image').attr('src',path);
$('#image').attr('width',width);
$('#image').attr('height',height);

As this executes, I see the image distort on the screen (as the new image is placed and the dimensions are changed), then my image appears correctly.

I've tried adding .hide() and .show() tags to mask the change, but I'm getting the same result.

$('#image').hide();
$('#image').attr('src',path);
$('#image').attr('width',width);
$('#image').show();
$('#image').attr('height',height);

Is there some sort of buffering technique that avoids these issues?

Answer 1

To preload your image before you replace it by updating the src attribute, you could use some Javascript like this:

var preload_image = new Image();

preload_image.onload = function()
{
    $('#image').attr('src', path);
    $('#image').attr('width', preload_image.width);
    $('#image').attr('height', preload_image.height);
};

preload_image.src = path;

Unfortunately, jQuery doesn’t have a specific set of functions to preload images…as far as I know..! Hope this helps! 🙂