3

このトピックはここ少し前から頭に浮かび、画像の置換/更新に関連するDOM更新の効率について考えていました。私はこれについて具体的に議論を見つけることができませんでした、そして私が以下に示す2つのオプションの間に理想的な解決策があるかどうかさえわかりません。

私が思いついた最良の答えは、<img>タグの追加の属性（使用されている場合は、、、の値などalt）widthをheight更新する必要があるかどうかに完全に依存しているということです。

では、画像を更新したり、2つの画像間で画像を交換したりする場合、最も効率的またはエレガントな方法は何だと思いますか。<img>要素を完全に<img>更新された新しい要素に置き換えるのが良いですsrcか、それとも既存<img>のsrc値のみを新しい画像で更新するのが良いですか？

私が使用した例では、小さな画像を使用していますが、パフォーマンスは画像のサイズなどによって影響を受けます。

私が持っている2つの方法は次のとおりです。

$('.swapimage_ele').on("click", function(evt){
    var img1 = $("#img1").html();
    var img2 = $("#img2").html();

    $("#img1").html(img2);
    $("#img2").html(img1);
});

$('.swapimage_src').on("click", function(evt){
    var img1 = $("#img1 img").attr("src");
    var img2 = $("#img2 img").attr("src");

    $("#img1 img").attr("src", img2);
    $("#img2 img").attr("src", img1);
});

2つのオプションを示す私が書いた簡単な例はここにあります：http：//jsfiddle.net/jshaw/KMmeR/

みんなの意見や好みに興味があり、これを行う理想的な方法があるかどうか。

4

3 に答える 3

4

jQueryが少なく、間違いなく使用していません.html()

$('.swapimage_src').on("click", function(evt){
    var img1 = document.querySelector("#img1 img");
    var img2 = document.querySelector("#img2 img");

    var temp = img1.src;
    img1.src = img2.src;
    img2.src = temp;
});

または、IE6 / 7をサポートする必要がある場合：

$('.swapimage_src').on("click", function(evt){
    var img1 = document.getElementById("img1").getElementsByTagName("img")[0];
    var img2 = document.getElementById("img2").getElementsByTagName("img")[0];

    var temp = img1.src;
    img1.src = img2.src;
    img2.src = temp;
});
于 2012-12-10T04:31:37.463 に答える
1

要素を完全に更新されたsrcを持つ新しい要素に置き換えるのが良いですか、それとも既存のsrc値のみを新しいイメージで更新するのが良いですか？

要素の作成は、属性を変更するよりもコストがかかります。innerHTML特に、コードのように経由して行われる場合。ただし、何も変更する必要はありません。DOMから要素を取得して、それらの位置を変更するだけです。

$('#swapimage_dom').on("click", function(e){
    var img1 = $("#img1"),
        img2 = $("#img2");
    var imgEl = img1.find("img");
    img2.find("img").appendTo(img1);
    imgEl.appendTo(img2);
});

私が使用した例では、小さな画像を使用していますが、パフォーマンスは画像のサイズなどによって影響を受けます。

DOM操作は安価です。方法の違いに気付くことはありません。ごくわずかです。リフロープロセスは少し異なる場合がありますが、目立たないように十分に高速である必要があります。

ただし、再描画（DOM操作と同じ結果）は、メモリと時間が必要なタスクです。もちろん、これは画像サイズとともに大きくなります。しかし、それを回避することはできません。

于 2012-12-10T04:39:44.363 に答える
0

非常に高解像度の画像とそれらを交換することを含むモバイルプロジェクトのためにこれでいくつかの実験をしました。

srcを交換する方が、新しい要素を作成するよりも高速です。

ただし、別の方法は、2つの画像を重ねて、表示される画像を入れ替えるためにz-indexを変更することです。（または1つの画像を画面外に配置して位置を入れ替える）これは、動的な画像と入れ替えたい場合、または入れ替える画像が数枚以上ある場合は機能しません。

于 2012-12-10T04:31:07.470 に答える