3

我试图确保外部 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);
  }
})();

有没有机会我错过了一个更简单的修复?

非常感谢!

4

2 回答 2

0

谢谢您的帮助!一旦我设置了 10 秒的窗口延迟,我意识到问题实际上并不在于 javascript 加载顺序,因为这是 flexbox 的问题。(过渡时覆盖的“颜色”幻灯片占据了 100% 的屏幕,而仅占 70%。)我会问一个单独的问题!

于 2017-12-13T08:25:48.267 回答
0

感谢您的详细信息!它有助于在实时站点上查看问题。看起来您正在使用 Wordpress,所以我建议使用 functions.php 文件和 wp_enqueue_script 函数将此脚本加入队列。

使用它,您可以控制脚本加载的位置,并在有任何依赖项时指定它,例如 jQuery。

这是一些关于使用的文档。

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

于 2017-12-12T23:05:55.900 回答