LazyWon Story

목차 [jQuery] $(document).ready()와 $(function(){}) [Vanila Javascript] window.onload 정리 [jQuery] $(document).ready()와 $(function(){}) 두 소스는 같은 역할을 한다. 외부 리소스, 이미지와는 상관 없이 브라우저가 DOM(Document Object Model) 트리를 생성한 직후에 실행된다. 따라서 $(document).ready()는 리소스들이 로드되기 전에 동작할 수 있다. window.onload 보다 더 빠르게 실행되며, 중복으로 사용하여 실행할 수 있고, 선언 순서대로 실행된다. .ready() 이벤트는 jQuery 3.0 이후부터는 사용하지 않는 것을 권장한다. 권장 방법 $(function()..

목차 문제상황 해결 문제상황 http://kenwheeler.github.io/slick/ 개발 중 autoplay: true 옵션을 주고 모바일(iOS, AOS)에서 확인 시, 첫 화면 로딩 시에는 autoplay가 동작하지만 스크롤 이후 혹은 해당 영역 터치 이후에는 autoplay가 작동하지 않았다. 아래 옵션을 추가하여 false로 설정했지만 소용없었다. pauseOnFoucs: false 포커스가 들어오면 슬라이드 이동 멈춤 pauseOnHover: false 마우스 호버 시 슬라이드 이동 멈춤 pauseOnDotsHover: false dot 호버 시 슬라이드 이동 멈춤 💡해결 구글링 한 결과 slick slider에서 제공하는 'slickPlay' 메서드를 사용하여 touchcancel, t..

목차 jQuery를 이용한 스크롤 이동 JavaScript를 이용한 스크롤 이동 홈페이지나 모바일 웹뷰에서 기본적으로 많이 사용하는 TOP 버튼 클릭시, 상단으로 스크롤바 이동시키는 기능을 만들려고 한다. jQuery를 덜어내는 작업 중, 순수 JavaScript에서 어떤 식으로 작성하는지 기록해보고자 한다. jQuery를 이용한 스크롤 이동 윈도우 스크롤 이동시키기 $(window).scrollTop(0); 애니메이션 효과 주면서 스크롤 이동시키기 $('html, body').animate({ scrollTop: 0 }, 200); JavaScript를 이용한 스크롤 이동 윈도우 스크롤 이동시키기 window.scrollTop(0, 0); 부드럽게 이동하는 애니메이션 효과를 지정하여 스크롤 이동시키기...