-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
해결됨
이미지 지연 로딩 질문 있습니다!
22.12.12 23:51 작성 조회수 260
2
이미지 지연 로딩에서 picture tag를 사용하여 webp가 지원되지 않는 브라우저인 경우 jpg로 로딩되도록 previousSibling을 사용하셨는데 picture tag 안에 source tag가 두 개 이상인 경우에는 어떻게 해야하나요?
반복문을 돌려야 하는 것인가요?
답변을 작성해보세요.
3
유동균
지식공유자2022.12.14
안녕하세요, 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)를 통해 하위 요소들에 접근하여 속성을 수정할 수 있습니다.
답변이 되었길 바라며, 강의에 관심을 가져주셔서 감사합니다. :)
답변 1