jquery - 倒壊防止

Question

最初に削除してからjQueryで属性を追加して画像を更新しようとしていsrcますが、残念ながら、これにより画像が折りたたまれ、リセット後にその下の要素が上下に移動します。これは非常に面倒です。どうすればこの動作を回避できますか?

関連する CSS:

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

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

(この要素は、 class="gallery" を持つ要素に<figure>含まれます)<section>

score 1 · Accepted Answer

次のようなものが機能します。

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ことを確認することです。divHTML が次のようになっているとします。

<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

それが役に立ったことを願っています！

score 0 · Accepted Answer

widthimage タグにおよびheight属性を設定する必要があります。

何かのようなもの：

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

もちろん、正確なサイズを知っている場合にのみ可能です。

score 0 · Accepted Answer

width画像にheight属性を付けて、要素に画像がなくてもサイズを維持することができます。

そのようです：

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

画像のサイズが変更された場合は、HTML の属性widthと属性を省略します。height代わりに、jQuery で属性を変更する場合はsrc、最初に幅と高さの属性を画像のサイズの img タグに追加して、要素がそのサイズを維持できるようにします。次に、次の画像が読み込まれるときに、これらの属性を削除して、新しい画像がフルサイズで表示されるようにします。

jquery - 倒壊防止

3 に答える 3

Related

Reference