코드(css/js)별 로딩 속도에 따른 슬라이드 기능 지연 시작현상
본문
아는 분께서 업체통해서 제작한 홈페이지인데,
위 페이지 로딩 시에 중간 슬라이드 영역이 살짝 딜레이 있이 작동이 됩니다.
(인터넷이나 컴퓨터가 빠른 환경에선 거의 체감이 안되긴 합니다만,,)
이 부분이 css가 바로 그리드(?) 적용과, 슬라이드가 바로 적용 되지 않고 로딩 된 후에 되는것 같은데
이럴 경우 해당 부분을 먼저 로딩(? preload?) 하는 방식으로 조치가 가능한지.. 또는 더 좋은 방법이 있는지, 전문가님들의 조언 부탁드립니다.
* 코드를보니 slick-slide 를 쓴거 같스브니다.
(제작 업체에선 기능이 많아 어쩔수 없다고 답변을 들었다고 합니다.)
답변 1
자바스크립트언어는 비동기 언어입니다
실행 그리고 실행에 대한 결과값이 나오는 순차적인 결과를 보여주는 일반적인 프로그래밍언어의 방식과 다르게,
실행 후 결과가 먼저 완료가 먼저된 것들부터 보여주는 언어입니다.
실행 후 각각의 실행 프로그램의 크기나 말씀하신 처리속도(컴퓨터사양)에 따라 결과가 보여지는 시간은 다릅니다.
말씀하신 문제도 이러한 비동기적 언어의 특성에 의해 나타나는 것입니다.
언어적 특성상 원하시는 결과를 만드시려면 모든 요소가 로딩 된 이후에 페이지가 보이도록 따로 처리를 해야하지만 상당히 복잡합니다.
비동기 언어를 동기적 언어 프로그래밍 방식으로 하는것은 쉬운 일이 아닙니다.
그나마 가장 쉬운 방법으로는 간단하게 가장 오래 걸리는 스크립트만 따로 실행이 끝났을 시 모든 요소를 보이게 설정하면 됩니다만.
해당 페이지 속도가 모든 사용자에게 느려보이는 단점이 있습니다.
다른방법으로는 실행속도가 오래 걸리는 스크립트를 기존 페이지 요소의 로딩속도와 크게 차이 없게 가볍게 만드는 방법입니다만 두 방법 다 쉬운 방법은 아닙니다.