Question

这个主题在最后一段时间一直在我的脑海中，我一直在考虑与更换/更新图像相关的DOM更新的效率。我没有能够专门找到这方面的讨论，我甚至不确定我将在下面显示的两个选项之间是否存在理想的解决方案。

我提出的最佳答案是，完全依赖于您是否需要更新<img>标记上的其他属性，例如alt，width，{{ 1}}如果正在使用它们的值。

好的，所以说你想要更新图像或者在两个图像之间进行图像交换，你认为什么是最有效或最优雅的方式。是否更好地使用已更新height的新<img>元素完全替换<img>元素，或仅更新现有src的{{1}}值新形象？

我使用小图像的例子，会影响图像大小等等。

我有两种方式：

<img>

我写的快速工作示例显示了两个选项：http://jsfiddle.net/jshaw/KMmeR/

只是好奇每个人的意见或偏好，以及是否有理想的做法。

Answer 1

少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;
});

Answer 2

使用更新的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操作相同的结果 - 具有相同的结果 - 需要内存和一些时间。当然，这会随着图像尺寸的增加而增加。但你无法解决这个问题。

Answer 3

对涉及极高分辨率图像并交换图像的移动项目进行了一些实验。

交换src比创建新元素更快。

然而，另一种方法是将两个图像叠加在一起并更改z索引以交换哪一个是可见的。（或者在屏幕上显示一个图像并交换其位置）如果您希望能够将其与任何动态图像交换，或者如果您只能交换几张图像，则此功能无效。

更新DOM中图像的最有效方法是什么？

3 个答案: