AOS 스크롤 애니메이션 플러그인 딜레이 해결방법
기술정보 24.08.07AOS(Aniamte On Scroll) 라이브러리는 스크롤을 할 때 애니메이션을 적용해주는 JavaScript 라이브러리입니다.
캐시 오류는 주로 애니메이션이 제대로 실행되지 않거나, 페이지를 다시 로드했을 때 이전에 적용된 애니메이션이 유지되지 않는 문제와 관련이 있을 수 있습니다.
once: true 옵션
- once: true 옵션은 애니메이션이 한 번만 실행되도록 설정하는 옵션입니다. 이 옵션이 활성화되면, 해당 요소가 화면에 처음 등장할 때만 애니메이션이 실행되고, 이후 스크롤 시 다시 나타나더라도 애니메이션이 실행되지 않습니다.
- 이 설정은 의도된 기능이지만, 사용자가 페이지를 새로고침했을 때 애니메이션이 다시 실행되지 않으면, 캐시 문제처럼 느껴질 수 있습니다.
AOS.refresh() 사용
- AOS.refresh()는 새로운 요소를 추가하거나, 동적으로 변경된 요소들에 대해 AOS 애니메이션을 다시 계산하고 적용하도록 합니다. 이 기능은 주로 AJAX로 콘텐츠를 로드하거나, 페이지 로드 후 특정 변경 사항이 있을 때 유용합니다.
- $(window).on('load', function () { AOS.refresh(); }); 코드는 페이지 로드 시 AOS 애니메이션을 새로고침하는 기능을 제공합니다. 이를 통해, 일부 브라우저에서 캐시 문제로 인해 애니메이션이 제대로 실행되지 않을 때, 애니메이션이 다시 활성화되도록 할 수 있습니다.
브라우저 캐시
브라우저 캐시는 웹 페이지의 일부를 저장하여, 페이지 재방문 시 더 빠르게 로드되도록 합니다. 그러나 AOS.js와 같은 애니메이션 라이브러리는 상태에 따라 다르게 동작할 수 있으며, 브라우저 캐시가 이를 방해할 수 있습니다.
해결 방법
AOS.init와 AOS.refresh()를 적절히 사용: 페이지의 특정 부분이나 요소가 동적으로 변경될 때 AOS.refresh()를 호출하여 새로고침을 강제합니다.
강력한 캐시 제어: 서버에서 캐시를 조정하여 AOS.js 스크립트가 올바르게 로드되도록 할 수 있습니다.
1 2 3 4 5 6 7 8 | <script> AOS.init({ once: true, }); $(window).on('load', function () { AOS.refresh(); }); </script> | cs |