jquery - 防止塌陷

Question

我试图通过首先删除然后src用jQuery添加回它的属性来刷新图像，但是不幸的是，这会导致它崩溃并在我重置它之后再次上下移动它下面的元素，这很烦人。我怎样才能避免这种行为？

相关HTML：

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

相关CSS：

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

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

（该<figure>元素包含在<section>具有 class="gallery" 的元素中）

Answer 1

像这样的东西会起作用：

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

如果有什么看起来含糊/可以理解，我很乐意解释。

编辑：另一种方法是用 a 包裹你的图像div并确保它div具有固定的高度/宽度。假设您的 HTML 如下所示：

<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

我希望这有帮助！

Answer 2

您需要为图像标签设置一个width和height属性。

就像是：

<img title="Result" id="result" src="http://example.com/image.bmp" width="250" height="120">

这当然只有在您知道确切尺寸的情况下才有可能。

Answer 3

您可以在图像上放置width和height属性，以便即使元素中没有图像，它也能保持其大小。

像这样：

<img src="" width="100" height="200"/>

如果图像的尺寸发生变化，我会在 HTML 中省略width和height属性。取而代之的是，当你src在 jQuery 中更改属性时，首先将 width 和 height 属性添加到 img 标签中以获得图像的大小，以便元素保持其大小。然后在加载下一个图像时，删除这些属性，以便新图像以其全尺寸显示。