2014-03-26 88 views
1

我似乎無法獲得預加載器(查詢加載器2)在頁面上的其他所有內容之前加載。 當我刷新頁面時,全屏幕滑塊顯示中的圖像會阻擋頁面,然後查詢加載器啓動。 有沒有辦法在頁面上的其他所有內容之前啓動預加載器?加載js文件的順序

我使用堆棧溢出很多,通常找到我的問題的答案,但與我有限的JavaScript知識這一個讓我難住。我試過的東西: 將調用queryloader2放在頁眉的頂部。 將調用放置在頁面底部的滑塊腳本中,以便在預加載器後加載。 將預加載器的z-index更改爲高於滑塊。 jQuery.getScript()按順序加載腳本,但仍然顯示滑塊阻止頁面,然後啓動預加載器。

我在想它與加載順序,但如果你有什麼我在做什麼錯誤在這裏你的幫助將不勝感激。

我把一個鏈接到我的網站,因爲我不知道在這裏把其中的一段代碼上,所以你可以看到預加載和滑塊加載南轅北轍http://stavriaphotography.com

回答

2

該網站是在外部腳本相當沉重。下面是在瀏覽器中加載資源是如何工作的:

圖片的異步加載,這意味着瀏覽器不等待圖像進一步延續下來DOM之前加載,但是

的JavaScript是裝同步,你可以不是加載之前加載下一個。

jQuery $(document).ready()函數僅在DOM完全加載時觸發。

這裏是怎麼回事,在您的網站:

您加載JQ和queryLoader的頭部,並準備把它當DOM已準備就緒。腳註中的腳本花費時間加載並延遲$(document).ready()函數調用。與此同時,您的圖像在您的身體中,並且由於它們是異步加載的,因此瀏覽器在queryLoader準備好執行之前開始加載它們。

你的情況最簡單的解決辦法是所有外部腳本移動到你的HTML頭,但不是一個非常實用的一個。

我建議在JavaScript上閱讀一下,然後把你的站點分成多個文件以加快載入速度。

一些指針:jQuery.ajax()和Handlebars.js,或者如果你真的想瘋狂潛入帶有RequireJS的Backbone.js來進行異步JavaScript加載。

希望這會有所幫助!

+0

這是非常有用的,並感謝您花時間回答。祝你有美好的一天! – user3462744

0

把jQuery的方式圖書館第一

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

再添加其他的JS文件

+0

感謝您的回覆,但我已經在頂部與其他人加載後的文件。 – user3462744