js文件的加載順序

Question

我似乎無法讓預加載器（查詢加載器2）先加載頁面上的其他所有內容。 當我刷新頁面時，全屏滑塊顯示中的圖像會阻止頁面向下，然后查詢加載器啟動。 有沒有一種方法可以在頁面上的其他所有內容之前啟動預加載器？

我經常使用堆棧溢出，通常會找到問題的答案，但是由於我對javascript的了解有限，這使我感到困惑。 我嘗試過的事情：將對queryloader2的調用放在頁眉頂部的頁面頂部。 將調用放在頁面底部的滑塊腳本上，以便它們在預加載器之后加載。 將預加載器的z索引更改為高於滑塊。 jQuery.getScript（）按順序加載了腳本，但是仍然顯示滑塊，阻止了頁面，然后啟動了預加載器。

我認為這與加載順序有關，但是如果您對我在做什么錯有任何想法，在此您的幫助將不勝感激。

我已經鏈接到我的網站，因為我不知道要在此處放置哪段代碼，因此您可以看到預加載器和滑塊以錯誤的方式加載的方式http://stavriaphotography.com

Answer 1

該站點非常重視外部腳本。 這是在瀏覽器中加載資源的工作方式：

圖片是異步加載的，這意味着瀏覽器在繼續深入DOM之前不會等待圖片加載。

JavaScript是同步加載的，您不能在前一個加載之前加載下一個。

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

這是您網站上發生的事情：

您將jQ和queryLoader加載到頭部，並准備在DOM准備好時調用它。 頁腳中的腳本需要花費一些時間才能加載，並且延遲了$(document).ready()函數的調用。 同時，您體內有圖像，並且由於圖像是異步加載的，因此在queryLoader准備執行之前，瀏覽器開始加載圖像。

在您的情況下，最簡單的解決方案是將所有外部腳本都移到html標頭中 ，但這不是一個非常實用的方法。

我建議您閱讀一些JavaScript知識，然后將您的網站分成多個文件，以加快加載速度。

一些指針：jQuery.ajax（）和Handlebars.js，或者如果您真的想瘋狂地使用RequireJS進入Backbone.js進行異步javascript加載。

希望這可以幫助！

Answer 2

首先將jQuery庫

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

然后添加其他JS文件