加载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％。）我会问一个单独的问题！