Question

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

相关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

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

修改：另一种方法是使用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属性。相反，当您在jQuery中更改src属性时，首先将宽度和高度属性添加到img标记以获取图像的大小，以便元素保持其大小。然后，在加载下一个图像时，删除这些属性，以便以全尺寸显示新图像。

防止<img/>崩溃

3 个答案: