FEDev Story

문제점 Swiper.js를 사용하여 슬라이드 적용시 좌우로 무한루프를 적용하기 위해 아래와 같이 옵션을 설정할 수 있다. {loop:true] 문제는 무한 루프를 적용하기 위해 Swiper.js는 DOM을 좌우로 복사하게 된다. 즉 카테고리가 4개라면 다음과 같이 DOM을 복사한다. 카테고리 4개 * 3 = 12개의 DOM 생성 복사된 DOM 자체는 무겁지 않으나 로딩시 데이트를 한번에 불러와 복사된 DOM에 적용하는 과정에서 성능 저하를 가져오게 된다. 카테고리가 많아질 수록 성능이 더 저하될 수 밖에 없는 구조이다. 스킨케어 메이크업 바디/헤어/향수 가방/지갑 해결책 모든 데이터를 한번에 불러오지 않도록 Ajax를 적용하여 현재 활성화된 탭에 대해서만 데이터를 불러온 후 슬라이드 될 때마다 동적으로 ..

baidu map api를 사용하는 페이지와 같이 ajax error 경고창이 뜨는 경우, ajax 리퀘스트를 보내고 응답을 받는 도중 새로고침을 하면 에러 메시지가 출력되는 현상이 있다. 아래와 같이 조건문을 넣어줌으로써 에러 메세지가 출력되는 것을 방지할 수 있다. $.ajax({ /* ajax options omitted */ error: function (xmlHttpRequest, textStatus, errorThrown) { if(xmlHttpRequest.readyState == 0 || xmlHttpRequest.status == 0) return; // it's not really an error else // Do normal error handling });