티스토리 접은글(⏰로딩 지연 문제) #2

접은글(더보기) 제목 자동 설정 + 로딩 지연 문제 해결 방법

블로그 글을 접는 <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> 태그 텍스트가 자동으로 버튼 텍스트로 지정됨
• ✅ 접힌 영역 클릭 시 📌 제목 ↔ 🔽 닫기로 토글
• ✅ 페이지 로딩 속도 저하 없음