[JS] 여러 cdn끼리 충돌나는데 꼭 써야할때!

cdn 충돌 임의로 해결하는법..

gsap이 다른 cdn과 충돌이 나서 section3에 도착했을때 cdn을 추가하는 방식으로 긴급처방했다..

(물론 지금은 사용안함)

JS

import { section2Animation } from "../section2Js/section2Entry.js";

// main index.html의 section2와 section3 의 cdn 충돌로 인해 section 마다 cdn 교체
let timeId;
const mainJs = document.querySelector('script[src="./main.js"]');
// 현재 스크롤 위치와 구하기
function getScrollPosition() {
  let scrollPosition = Math.floor(window.scrollY || document.documentElement.scrollTop);
  
  // section3 position
  let section3Top = Math.floor(window.scrollY + document.querySelector("#section3").getBoundingClientRect().top);
  section2Animation(scrollPosition);

  if (!timeId) {
    timeId = setTimeout(() => {
      timeId = null;
      if (scrollPosition === section3Top) {
        const section3CDN = document.createElement("script");
        const section3Script = document.createElement("script");
        section3Script.src = `./section3/section3.js`;
        // section3Script.type = "module";
        section3CDN.src = `https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js`;
        mainJs.after(section3CDN);
        mainJs.after(section3Script);
      } else {
        const findSection3Script = document.querySelector(
          'script[src="./section3/section3.js"]'
        );
        const findSection3CDN = document.querySelector(
          'script[src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"]'
        );

        if (findSection3Script !== null && findSection3CDN) {
          document.body.removeChild(findSection3Script);
          document.body.removeChild(findSection3CDN);
        }
      }
    }, 10);
  }
}

document.addEventListener('DOMContentLoaded', () => {
  getScrollPosition();
});
window.addEventListener("scroll", getScrollPosition);

Portfolio 프로젝트와 관련된 포스트들

포트폴리오 웹 제작 회고 >

JS에서 이메일 보내기 >

cdn끼리 충돌 날 때 해결법 >

스크롤 시 한 섹션씩 이동 >

JS으로 Include 사용하기! >

자동 무한 이미지 슬라이드 구현 >