3

这个话题最近一直在我脑海中浮现，我一直在思考与替换/更新图像相关的 DOM 更新的效率。我还没有找到专门讨论这个问题的讨论，我什至不确定我将在下面展示的两个选项之间是否存在理想的解决方案。

我想出的最佳答案是，它完全取决于您是否需要更新<img>标签上的其他属性，例如alt, width,height值（如果它们正在被使用）。

好的，假设您要更新图像或在两个图像之间进行图像交换，您认为最有效或最优雅的方式是什么。用更新<img>的新元素完全替换元素还是只用新图像更新现有的值更好？<img>src<img>src

我使用小图像的示例，性能会受到图像大小或其他因素的影响。

我有两种方法：

$('.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);
});

​我写的显示这两个选项的快速工作示例在这里：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 比创建新元素要快。

但是，另一种选择是将两个图像叠加在一起并更改 z-indexes 以交换哪个是可见的。（或将一张图像从屏幕上移开并交换它们的位置）如果您希望能够将其与任何动态图像交换，或者如果您有多个图像要交换，则此方法不起作用。

于 2012-12-10T04:31:07.470 回答