안녕하세요
디자이너를 위한 jQuery책을 보고 공부하고 있는데 이해가 되지 않는 부분이 있어 이렇게 질문을 남깁니다.
p190쪽 아래쪽 문단 보면 페이드 아웃이 완료되어도 원래의 img태그는 display속성이 none이 되어 볼 수 없게 되었을 뿐 html태그로 존재하고 있으므로 섬내일 클릭을 반복하면 img태그가 점점 늘어나게 됩니다.
라고 되어있는데요 실제로도 소스대로 하면 잘 됩니다. remove()태그를 주지않으면 페이드 아웃 효과도 없구요
궁금한 부분은 바로 "페이드 아웃이 완료되어도 원래의 img태그는 display속성이 none이 되어 볼 수 없게 되었을 뿐" 이라는 부분인데요 p165쪽에 실무에서 자주 나타나는 함정이라는 부분에도 나와 있듯이 fadeOut으로 비표시로 하면 이미지가 차지하던 공간이 사라진다라고 하고있고
display:none으로 된다는건 화면상에서 공간조차도 없어지게 만드는 속성이므로 웹페이지 상에서 확인 할 수도 없고 공간조차도 있지 않다고 알고 있습니다.
그렇담 구지 remove()를 쓸 필요가 있나요???
어차피 fadeOut만 해도 display:none이 되어서 없어지는건데 왜 콜백함수 속에 remove()까지 해야되는지 이해가 되지 않습니다.
*) 물론 소스상에서는 콜백함수 없이 해버리면 제대로 작동이 되지 않습니다. 그저 이해가 되지 않아서 질문합니다. ^^
자세한 답변 부탁드립니다.
디자이너를 위한 jQuery책을 보고 공부하고 있는데 이해가 되지 않는 부분이 있어 이렇게 질문을 남깁니다.
p190쪽 아래쪽 문단 보면 페이드 아웃이 완료되어도 원래의 img태그는 display속성이 none이 되어 볼 수 없게 되었을 뿐 html태그로 존재하고 있으므로 섬내일 클릭을 반복하면 img태그가 점점 늘어나게 됩니다.
라고 되어있는데요 실제로도 소스대로 하면 잘 됩니다. remove()태그를 주지않으면 페이드 아웃 효과도 없구요
궁금한 부분은 바로 "페이드 아웃이 완료되어도 원래의 img태그는 display속성이 none이 되어 볼 수 없게 되었을 뿐" 이라는 부분인데요 p165쪽에 실무에서 자주 나타나는 함정이라는 부분에도 나와 있듯이 fadeOut으로 비표시로 하면 이미지가 차지하던 공간이 사라진다라고 하고있고
display:none으로 된다는건 화면상에서 공간조차도 없어지게 만드는 속성이므로 웹페이지 상에서 확인 할 수도 없고 공간조차도 있지 않다고 알고 있습니다.
그렇담 구지 remove()를 쓸 필요가 있나요???
어차피 fadeOut만 해도 display:none이 되어서 없어지는건데 왜 콜백함수 속에 remove()까지 해야되는지 이해가 되지 않습니다.
*) 물론 소스상에서는 콜백함수 없이 해버리면 제대로 작동이 되지 않습니다. 그저 이해가 되지 않아서 질문합니다. ^^
자세한 답변 부탁드립니다.
img태그가 늘어나는 것은 $(this).remove() 를 주석처리 하고 몇번 섬네일을 클릭하신후
크롬 브라우져의 개발자 도구나 IE9에서 F12를 눌러서 현재 적용되고 있는
태그들을 살펴보시면 바로 알수 있습니다.
그리고 fadeout으로 인해 공간이 사라지는 것이지 태그가 사라지는것이 아닙니다.
브라우져상에서 볼때 새로운 이미지가 추가되고 이미 추가되어 있던 이미지는 fadeout되므로
새로 추가되는 이미지가 잘 보이지만 fadeout된 이미지 태그는 사라지지 않고 계속 남아있게 됩니다.
이렇게 계속 반복되면 메모리 오버플로우가 될것입니다.
결론은.. fadeout되어도 태그는 사라지지 않습니다. 계속 쌓입니다.
그것을 방지하기 fadeout과 함께 태그를 remove()하는 것입니다.
감사합니다.