인프런 커뮤니티 질문&답변

안녕하세요, marios님

source tag가 두 개 이상인 경우, 지연 로딩 방법에 대해서 질문을 주셨는데요.

방법은 다양합니다.

중요한 건 source 태그이건 img 태그이건 이미지 주소를 src(srcset)이 아닌 data-src(srcset)에 임시로 넣어뒀다가 꺼내다 쓴다는 것입니다.
즉, 어떤 방법으로 요소를 선택하든 상관없습니다.

강의에서는 단일 source 태그이기 때문에 previousSibling을 사용하여 탐색을 했는데요.
동일하게 previousSibling을 여러번 사용하여 복수의 source 태그를 선택할 수도 있습니다.
말씀하신 것처럼 반복문을 사용하면 source 태그의 갯수에 상관없이 존재하는 모든 source 태그를 선택할 수도 있겠죠.

다른 방법으로는 ref를 img 태그가 아니라 picture 태그에 연결하는 것입니다.
previousSibling 을 사용했던 이유는 img 태그를 기준으로 source 태그를 선택하려고 했기 때문입니다.
하지만, 굳이 img 태그가 기준이 될 필요는 없습니다. picture 태그가 기준이 되어도 됩니다.
(동일한 위치에 위치하는 요소이기 때문에 동작에는 차이가 없습니다.)
이렇게하면 entry.target.previousSibling 이 아니라 entry.target.children(또는 childNodes)를 통해 하위 요소들에 접근하여 속성을 수정할 수 있습니다.

답변이 되었길 바라며, 강의에 관심을 가져주셔서 감사합니다. :)