js 파일의로드 순서

Question

프리 로더 (Query Loader 2)를 페이지의 다른 모든 것보다 먼저로드 할 수없는 것 같습니다. 페이지를 새로 고침하면 전체 화면 슬라이더의 이미지가 페이지 아래로 블록 표시되고 쿼리 로더가 시작됩니다. 페이지의 다른 모든 항목보다 먼저 프리 로더를 시작하는 방법이 있습니까?

스택 오버플로를 많이 사용하고 일반적으로 내 질문에 대한 답변을 찾을 수 있지만 자바 스크립트에 대한 제한된 지식으로 인해이 하나가 저를 곤혹스럽게 만듭니다. 내가 시도한 것들 : 헤더의 페이지 상단에있는 queryloader2에 대한 호출. 프리 로더 뒤에로드되도록 슬라이더 스크립트 호출을 페이지 하단에 배치합니다. 프리 로더의 Z- 색인을 슬라이더보다 높게 변경하십시오. jQuery.getScript()는 스크립트를 순서대로로드했지만 여전히 표시되는 슬라이더는 페이지를 차단 한 다음 프리 로더가 시작되었습니다.

로드 순서와 관련 있다고 생각하지만, 내가 잘못하고있는 것에 대한 아이디어가 있다면 도움을 많이 주시면 감사하겠습니다.

나는 내가 여기에 넣어 코드의 어느 부분 몰랐로 내 사이트에 링크를 넣어했고 그래서 당신은 프리 로더와 슬라이더 라운드 http://stavriaphotography.com

Answer 1

사이트를 추가

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 

최초의 도서관은 외부 스크립트에 상당히 무겁습니다. 여기에 브라우저에서 리소스를로드 작동 방법은 다음과 같습니다 비동기로드

이미지를,이가로드 된 자바 스크립트하지만, 이미지가 DOM 아래로 더 진행하기 전에로드 될 때까지 브라우저가 기다리지 않는다

을 의미한다 동 기적으로 이 아닌은 이전 값이로드되기 전에 다음 값을로드 할 수 있습니다.

jQuery $(document).ready() DOM이 완전히로드 된 경우에만 함수가 실행됩니다.

여기에 귀하의 사이트에, 무슨 무슨 :

당신은 머리에 JQ와 queryLoader을로드하고 DOM이 준비 할 때 전화를 준비합니다. 바닥 글에있는 스크립트는로드하는 데 시간이 걸리고 $(document).ready() 함수 호출을 지연합니다. 그 동안 몸에 이미지가 있고 비동기 적으로로드되기 때문에 브라우저는 queryLoader를 실행할 준비가되기 전에 이미지를로드하기 시작합니다.

귀하의 경우 가장 간단한 해결책은 그러나없는 매우 실용적인 일, 당신의 HTML 헤더 모든 외부 스크립트를 이동하는 것입니다.

자바 스크립트에서 조금 읽고 더 빠른 로딩을 위해 여러 파일로 사이트를 분할하는 것이 좋습니다.

포인터 : jQuery.ajax() 및 Handlebars.js 또는 비동기식 자바 스크립트 로딩을 위해 RequireJS를 사용하여 Backbone.js로 들어가기를 정말로 원한다면.

희망이 도움이됩니다.

Answer 2

jQuery를 넣어 잘못된 방법을로드하는 방식을 볼 수 있습니다 다음 다른 JS 파일