Загрузка javascript после загрузки html-страницы

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

Спасибо за помощь! Установив 10-секундную задержку окна, я понял, что проблема не в порядке загрузки javascript, а в flexbox. ("Цветной" слайд, который накладывается при переходе, занимает 100% экрана, а не 70%.) Я задам отдельный вопрос об этом!

Answer 2

Спасибо за подробности! Это помогает увидеть проблему на живом сайте. Похоже, вы используете Wordpress, поэтому я бы порекомендовал поставить этот скрипт в очередь с помощью файла functions.php и функции wp_enqueue_script.

Используя это, вы можете контролировать, где загружается скрипт, и указывать его, если есть какие-либо зависимости, такие как jQuery.

Вот некоторая документация по использованию.

Если это кажется странным, дайте мне знать, и я постараюсь помочь вам в дальнейшем.