加載html頁面后加載javascript

Question

我正在嘗試確保外部javascript文件最后加載到頁面上。

javascript文件“script.js”（控制圖像滑塊）應該是最后一個。 我懷疑它現在沒有加載，因為我的網頁上覆蓋了紅色背景圖像，該圖像在文件中定義。 當我刪除script.js文件時，我的網頁正常顯示，但滑塊功能不起作用。

在第一次加載時，正確的布局會在被紅色背景圖像覆蓋之前顯示一秒鍾。

目前，在我的html文件的末尾，我有：

 <!-- script references --> <!-- jquery script --> <script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script type='text/javascript' src="js/bootstrap.min.js"></script> <script type='text/javascript' src="js/classie.js"></script> <script type='text/javascript' src="js/main.js"></script> <!-- script --> <script type='text/javascript' src="js/script.js"></script> 

這個網站使用相同的確切滑塊，並具有相同順序的javascript文件，但我的不起作用。

我的直播網站就在這里 。 我試過了

  var script = document.createElement('script'); script.setAttribute('src', 'http://learningbycreating.com/js/script.js'); script.setAttribute('type', 'text/javascript'); document.getElementsByTagName('head')[0].appendChild(script); 

然后我嘗試了require.js，但是考慮到我的初始javascript級別，我很失落。

我也試過了

 <script> $.getScript("Your js file path",function(){ $(document).ready(ready); }); </script> 

但由於使用了jQuery而收到錯誤。

這是導致問題的javascript文件：

 (function() { var pages = [].slice.call(document.querySelectorAll('.pages > .page')), currentPage = 0, revealerOpts = { // the layers are the elements that move from the sides nmbLayers: 3, // bg color of each layer bgcolor: ['#0092DD', '#fff', 'red'], // effect classname effect: 'anim--effect-1', onStart: function(direction) { // next page gets class page--animate-[direction] var nextPage = pages[currentPage === 0 ? 0 : currentPage]; classie.add(nextPage, 'page--animate-' + direction); }, onEnd: function(direction) { // remove class page--animate-[direction] from next page var nextPage = pages[currentPage === 0 ? pages.length - 1 : 0]; nextPage.className = 'page'; } }; revealer = new Revealer(revealerOpts); // clicking the page nav buttons document.querySelector('button.pagenav__button--top').addEventListener('click', function() { reveal('top'); }); document.querySelector('button.pagenav__button--bottom').addEventListener('click', function() { reveal('bottom'); }); // triggers the effect by calling instance.reveal(direction, callbackTime, callbackFn) function reveal(direction) { var callbackTime = 750, callbackFn = function() { classie.remove(pages[currentPage], 'page--current'); currentPage = currentPage < pages.length - 1 ? currentPage + 1 : 0; classie.add(pages[currentPage], 'page--current'); }; revealer.reveal(direction, callbackTime, callbackFn); } })(); 

我有什么機會找到一個更簡單的修復方法嗎？

非常感謝！

Answer 1

謝謝你的詳細信息！ 它有助於在實際網站上查看問題。 看起來你正在使用Wordpress，所以我建議使用functions.php文件和wp_enqueue_script函數來排隊這個腳本。

使用它，您可以控制腳本加載的位置，並指定它是否有任何依賴項，如jQuery。

這是一些有關使用的文檔。

如果這看起來令人困惑，請告訴我，我可以嘗試進一步提供幫助。

Answer 2

謝謝您的幫助！ 一旦我設置了10秒的窗口延遲，我意識到問題實際上並不是javascript加載順序，因為這是flexbox的一個問題。 （作為轉換覆蓋的“顏色”幻燈片占據屏幕的100％而僅占70％。）我會問一個單獨的問題！