DOM에 추가하기 전에 AJAX 응답에서 Div를 바꾸기

Question

두 페이지에서 같은 영웅 이미지가있는 페이지 사이에 AJAX 전환을 만듭니다. 링크를 클릭하면 이미지가 중앙에오고 새 HTML을 뒤에 추가하고 중앙 이미지를 페이드 아웃합니다. 문제는 캐시 된 이미지 (같은 파일)에도 이미지가 앞쪽으로 사라질 때 갑자기 뒤에서 (AJAX 응답에서 DOM에 추가 된 후 렌더링 됨) 이미지가 나타나는 것을 볼 수 있습니다.

이미지의 앞면에 페이드 아웃을 약간 지연 시켜도 뒷면의 이미지는 아직 준비가되지 않았습니다. (아마도 렌더링에는 시간이 더 걸릴 것입니다.)

내 옵션은 Ajax 이미지 div가 완전히 렌더링 된 것을 기다리는 것입니다 (어떻게 해야할지 모르겠다). - 그게 내가 시도하고 싶은 것입니다 : 이미지를 DOM에 추가하기 전에 AJAX 응답 내에 저장하십시오.

이 경우에도 가능하며 성능 향상에 도움이됩니까? 또한 AJAX 응답으로 컨텐츠를 교체 한 직후 div를 교체하려고 시도합니다.

힌트는 대단히 환영합니다. 상단 이미지가 상단에 남아 있도록

환호

Answer 1

당신은 CSS를 z-index 속성을 설정할 수 있습니다. 그리고 이미지 리스너가 끝나면 상단 이미지가 사라질 수 있도록 이벤트 리스너를 설정하십시오.

$('#bottom-img').on('load', function() { 
    $('#top-img').fadeOut(); 
}); 

Answer 2

답변 감사합니다. 이것이 내가 의미했던 것입니다. 이렇게하려면 이미지로드가 완료 될 때까지 기다렸다가 맨 위 이미지를 fadeOut해야합니다. 하지만 더 좋은 해결책이 있습니다 :

두 이미지가 정확히 같기 때문에 Ajax 응답에 이미지를 복사 한 직후 (Ajax 응답)의 내용을 바꿉니다. (즉, 이미로드 된 이미지가있는 이미지).

그럼 나는 즉시 퇴색합니다. 이것은 매우 부드럽게 보이는 전환을 제공하고«로드 될 때까지 기다리는 것»의 단점은 사라졌습니다.

(필자는 DOM에 추가하기 전에 AJAX 응답 내에서 이미지를 교체하고 싶어 내 최초의 질문, 비교하여, 나는 이제 DOM에 추가하고 즉시 조작 할 수 있습니다.)

감사 어쨌든. 환호