Question

I use the jquery.replaceWith() function.. it work fine but when i used it on image, it create a flash. What i mean is it replace the image-a by image-b but while image-a is deleted, and image-b is loaded, there is NOTHING, so the box is 0px height and that make all the layut change for 1 second and flash everything…

What should i used, or how to make replaceWith() put the image only after it have been loaded, so replacing it will be instantaneous.

you can get a look at the nextgen gallery image browser sideshow problem here
http://mecanomedic.com/cms/

Answer 1

Since the dimensions of your images are always the same, you can specify the sizes on the <img> tag:

<img class="slideshow" src="/path/to/my/image001.jpg" width="267" height="200">

Or with CSS:

.slideshow {
    height: 267px;
    width: 267px;
}

This should prevent the element from changing sizes while the new image loads.

Also, you may want to simply change the src of the <img> tag, rather than replacing the entire DOM entry:

$(currentimage).attr('src','/path/to/my/image002.jpg');