접은글(더보기) 제목 자동 설정 + 로딩 지연 문제 해결 방법
블로그 글을 접는 <div data-ke-type="moreLess"> 구조에서, 더보기 버튼에 자동으로 제목을 붙이고 싶을 때 아래 스크립트를 사용합니다.
❗️문제 요약
setTimeout(..., 300)으로 DOM을 강제로 기다리게 하면서
페이지 로딩이 지연되거나 스크립트 실행이 늦어지는 현상 발생
⚠️ 이전에 안됐던 코드
처음엔 DOMContentLoaded나 setTimeout(..., 300)으로 실행했는데, 일부 접힌 글 영역이 렌더링 완료 전에 스크립트가 작동해 b 태그를 못 찾는 문제(= 제목이 안바뀜)가 있었습니다. or 페이지 로딩이 길어짐
더보기
이전 코드
<script>
window.addEventListener("load", function () {
setTimeout(function () {
document.querySelectorAll("[data-ke-type='moreLess']").forEach(function (container) {
const btn = container.querySelector(".btn-toggle-moreless");
const content = container.querySelector(".moreless-content");
const firstBold = content.querySelector("b");
const titleText = firstBold ? firstBold.textContent.trim() : "더보기";
btn.textContent = 📌 ${titleText};
btn.addEventListener("click", function (e) {
e.preventDefault();
const isHidden = content.style.display === "none" || content.style.display === "";
content.style.display = isHidden ? "block" : "none";
btn.textContent = isHidden ? "🔽 닫기" : 📌 ${titleText};
});
content.style.display = "none";
});
}, 300); // 렌더링 딜레이 고려
});
</script>
🧠 원인 분석
- window.addEventListener("load", ...)는 모든 리소스 (이미지, 광고 등) 가 다 로드된 뒤에 실행됨
- 여기에 setTimeout(..., 300)까지 걸리면,
광고/썸네일 많은 블로그의 경우 실행 시점이 매우 느려질 수 있음 - 결국 접은글 제목 표시가 늦게 바뀌고, 사용자 체감상 "로딩이 느려짐" 으로 보일 수 있어요.
✅ setTimeout 딜레이 줄이기 효과
딜레이(ms) | 효과 | 위험 |
300 | 적당한 안정성 (일반적으로 무난함) | 이미지나 광고 많을 경우 느리게 느껴짐 |
100 | 반응속도 빠름 | 일부 콘텐츠가 아직 DOM에 없을 수 있음 |
0~50 | 거의 즉시 실행되나 안정성 가장 낮음 | b 태그가 없는 상태에서 실행될 수 있음 |
🔄 대안 추천 - requestAnimationFrame
setTimeout 대신 이 방법을 사용하면 불필요한 시간 지연 없이, DOM 렌더링이 완료된 직후 1프레임 이후 실행되어 훨씬 깔끔합니다.
<script>
window.addEventListener("load", function () {
requestAnimationFrame(() => {
document.querySelectorAll("[data-ke-type='moreLess']").forEach(function (container) {
const btn = container.querySelector(".btn-toggle-moreless");
const content = container.querySelector(".moreless-content");
const firstBold = content.querySelector("b");
const titleText = firstBold ? firstBold.textContent.trim() : "더보기";
btn.textContent = `📌 ${titleText}`;
btn.addEventListener("click", function (e) {
e.preventDefault();
const isHidden = content.style.display === "none" || content.style.display === "";
content.style.display = isHidden ? "block" : "none";
btn.textContent = isHidden ? "🔽 닫기" : `📌 ${titleText}`;
});
content.style.display = "none";
});
});
});
</script>
🔍 결론
- 300을 100 정도로 줄이면 반응은 빨라지지만 렌더링 타이밍에 따라 불안정할 수 있음
- 제일 추천: requestAnimationFrame으로 바꿔서 렌더링 완료 직후 실행되도록 만드는 방법!
🧪 결과
- ✅ 접은글 안의 <b> 태그 텍스트가 자동으로 버튼 텍스트로 지정됨
- ✅ 접힌 영역 클릭 시 📌 제목 ↔ 🔽 닫기로 토글
- ✅ 페이지 로딩 속도 저하 없음
'그냥 해봤는데' 카테고리의 다른 글
🎨티스토리 사이드바 카테고리 디자인 개선 (0) | 2025.05.28 |
---|---|
티스토리 사이드바 상단에 프로필 이미지 넣는 방법 (0) | 2025.05.24 |
구글 스프레드시트(Excel)에서 Sheet 간 2단 드롭다운 (0) | 2025.05.18 |
티스토리 접은글 색 및 더보기/닫기 문구 변경(스킨 HTML, CSS 편집) (0) | 2025.05.17 |
기술 블로그, 결국은 '프롬프트 싸움'이었다 (0) | 2025.05.09 |
댓글