Question

我正在尝试确保外部javascript文件最后加载到页面上。

javascript文件＆＃34; script.js＆＃34; （控制图像滑块）应该是最后一个。我怀疑它现在没有加载，因为我的网页上覆盖了红色背景图像，该图像在文件中定义。当我删除script.js文件时，我的网页会正常显示，但滑块功能无法正常工作。

首次加载时，正确的布局会在被红色背景图像覆盖之前显示一秒钟。

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

＆＃13;

<!-- 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>

＆＃13;

This website使用完全相同的滑块，并且javascript文件的顺序相同，但我的工作并不起作用。

My live website is here。我试过了

＆＃13;

   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);

＆＃13;

然后我尝试了require.js，但是考虑到我的初始javascript级别，我很失落。

我也试过

＆＃13;

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

＆＃13;

但由于使用了jQuery而收到了错误。

这是导致问题的javascript文件：

＆＃13;

(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);
  }
})();

＆＃13;

我有机会找到一个更简单的修复机会吗？

非常感谢！

Answer 1

感谢您的详细信息！它有助于在实际网站上查看问题。看起来你正在使用Wordpress，所以我建议使用functions.php文件和wp_enqueue_script函数来排队这个脚本。

使用它，您可以控制脚本加载的位置，并指定它是否有任何依赖项，如jQuery。

以下是usage的一些文档。

如果这看起来令人困惑，请告诉我，我可以尝试进一步提供帮助。

Answer 2

感谢您的帮助！一旦我设置了10秒的窗口延迟，我意识到问题实际上并不是javascript加载顺序，因为它是flexbox的一个问题。（＆＃34;颜色＆＃34;叠加的幻灯片，因为过渡占据了屏幕的100％而不是70％。）我会问一个单独的问题！

加载html页面后加载javascript

2 个答案: