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

这个话题一直在我脑海里，最近一段时间，我一直在考虑更新DOM /更新图像的效率。我一直没能找到具体的讨论，我甚至不确定在下面的两个选项之间是否存在理想的解决方案。什么是最有效的方式来更新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/

只是好奇，在每个人的意见或偏好，以及是否有这是做这件事的理想方式。

来源

2012-12-10 jshaw3

到目前为止透露了哪些测试？ – RobG

我把答案中提供的解决方案进行了几项测试，并且使用vanilla JS切换图像src是最有效的解决方案。在看到这些测试运行后，认为它肯定是为什么@ IHateLazy的解决方案效果最好。谢谢！ [这里是我的测试。]（http://jsperf.com/image-swap-efficiency） – jshaw3

少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-10 04:31:37

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

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

但是，另一种替代方法是将两个图像叠加在一起，并将z-索引更改为交换哪一个是可见的。（或者让一个图像关闭屏幕并交换它们的位置）如果您希望能够将其与任何动态图像进行交换，或者如果您不只有几张图像进行交换，则此功能无效。

来源

2012-12-10 04:31:07 mash

是更好地与新元素完全替代元素一个更新的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-10 04:39:44 Bergi

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

回答

相关问题