images Loaded

imagesLoadedimagesLoaded Plugin을 사용하면 이미지의 로딩 여부를 체크하여 이벤트를 발생시킬 수 있습니다.  CDNNPM$ npm install imagesloaded$ yarn add imagesloaded Syntaximageconst init = () => { // image loading이 끝나면 실행 할 함수};const imgs = [...document.querySelectorAll("img")]; // Array like ==> Arrayconst loader = document.querySelector(".loader--text");const updateProgress = (instance) => { const per = Math.round((instance.p..

2024.05.29

slick slider

Settings $('.slider-items').slick({ rows: 1, //이미지를 몇 줄로 표시할지 개수 dots: false, //슬라이더 아래에 도트 네비게이션 버튼 표시 여부(true or false) ▶기본값 false appendDots: $('selector'), //네비게이션 버튼 변경 dotsClass: 'custom-dots', //네비게이션 버튼 클래스 변경 infinite: true, //무한반복(true or false) 기본값 true slidesToShow: 4, //한번에 보여줄 슬라이드 아이템 개수 slidesToScroll: 4, //한번에 넘길 슬라이드 아이템 개수 slidesPerRow: 1, //보여질 행의 수 (한 줄, 두 줄 ... ) autoplay: ..

2023.11.03

가시영역의 이미지만 로딩 – Lazy Load Plugin for jQuery

Lazy Loading 이란? lazy loading은 페이지를 읽어들이는 시점에 중요하지 않은 리소스 로딩을 추 후에 하는 기술 입니다. 웹 성능 최적화를 위한 Image Lazy Loading 기법 처음에는 화면에 보여지는 이미지만 로딩 되어있고, 스크롤 시 아래 이미지들을 호출하는 플러그인 HTML

2022.03.18