Question

I’m trying to refresh an image by first removing and then adding back its src attribute with jQuery, but, unfortunately, this causes it to collapse and shift the elements below it up and down again after I reset it, which is quite annoying. How could I avoid this behavior?

Relevant HTML:

<figure>
    <figcaption>Result</figcaption>
    <img title="Result" id="result" src="http://example.com/image.bmp">
</figure>

Relevant CSS:

.gallery figure {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.gallery img {
    min-width: 160px;
    width: 65%;
}

(the <figure> element is included in a <section> element which has class=”gallery”)

Answer 1

Something like this would work:

var res = $("#result");
res.attr("height", res.height()); //fix the image's height
res.attr("width", res.width()); //fix the image's width
var prev = res.attr("src"); //cache the image's src
res.attr("src", ""); //remove src
res.attr("src", prev); //reset src to refresh image

If anything looks vague/understandable I’d be glad to explain it.

Edit: another method is to wrap your image with a div and make sure that the div has a fixed height/width. Let’s suppose your HTML looks like:

<figure>
    <figcaption>Result</figcaption>
    <div id = "wrapper">
        <img title="Result" id="result" src="http://example.com/image.bmp">
    </div>
</figure>

JavaScript:

var wrap = $("#wrapper");
wrap.css({"height": wrap.height(), "width": wrap.width()}); //fix height and width
var res = $("#result");
var prev = res.attr("src"); //cache the image's src
res.attr("src", ""); //remove src
res.attr("src", prev); //reset src to refresh image

I hope that helped!