DOM에서 이미지를 업데이트하는 가장 효율적인 방법은 무엇입니까?

Question

이 주제는 잠시 동안 내 마음에 들었으며 이미지 교체/업데이트와 관련된 DOM 업데이트의 효율성을 고려했습니다. 나는 이것에 대한 토론을 구체적으로 찾을 수 없었고 아래에 제시 할 두 가지 옵션 사이에 이상적인 해결책이 있는지 확신 할 수 없다.

내가 함께 왔어요 가장 좋은 대답은 그게 당신이 alt, width은, 그들이 height 값을 사용중인 경우 같은 <img> 태그에 추가 속성을 업데이트해야하는 경우에 전적으로 의존이다.

좋아, 이미지를 업데이트하거나 두 이미지간에 이미지 스왑을하고 싶다면 가장 효율적이거나 우아한 방법이라고 생각합니까? <img> 요소를 새로운 <img> 요소 (업데이트 된 src)로 완전히 바꾸거나 기존 이미지 <img>의 src 값을 새 이미지로 업데이트하는 것이 더 낫습니까?

예를 들어 작은 이미지를 사용하는 경우 성능이 이미지 크기 또는 기타 영향을받습니다.

두 가지 방법이 내가있는 한 : 모든 사람의 의견이나 취향에 http://jsfiddle.net/jshaw/KMmeR/

그냥 호기심이 있다면 :

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

나는 두 가지 옵션을 보여주는 쓴 한 빠른 동작하는 예제가 여기에있다 이렇게하는 이상적인 방법.

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를 바꾼 것은 새 요소를 만드는 것보다 빠릅니다.

그러나 다른 방법으로는 두 이미지를 서로 겹치게하고 z- 색인을 바꿔서 어느 것이 보이게 할 것인지를 변경하는 것입니다. (또는 하나의 이미지를 화면에서 떼어 내고 위치를 바꾸는 것) 동적 인 이미지로 바꾸고 싶거나 그 사이에 스왑 할 이미지가 몇 개 이상있는 경우에는 작동하지 않습니다.

Answer 3

는 새로운 요소와 요소를 완전히 대체하는 것이 좋습니다 업데이트 된 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 조작과 동일한 다시 그리기는 메모리와 시간이 필요한 작업입니다. 물론 이것은 이미지 크기와 함께 증가 할 것입니다. 그러나 당신은 그 문제를 해결할 수 없습니다.