Loading javascript after html page load

Question

I'm trying to make sure that an external javascript file loads last on the page.

The javascript file "script.js" (which controls the image slider) should be last. I suspect it's not loading last right now because my webpage is covered with a red background image, which is defined in the file. When I remove the script.js file, my webpage shows up normally, but the slider functions don't work.

On first load, the proper layout shows up for a second before being covered by the red background image.

Currently, at the end of my html file, I have:

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

This website is using the same exact slider, and has the javascript files in the same order, but mine doesn't work.

My live website is here. I've tried

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

I then tried require.js, but got pretty lost given my beginning level of javascript.

I also tried

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

but received errors due to the use of jQuery.

This is the javascript file that's causing problems:

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

Any chance there's a simpler fix I'm missing?

Thanks so much!

Is your script just before the closing tag of the body element? — ImprobabilityCast, Dec 12 '17 at 22:36
Please prove the order of script loading is the problem. Say by loading the script using a 10 second timeout after the window has loaded to see if the problem goes away. A [minimal complete and verifiable example](https://stackoverflow.com/help/mcve) would also be helpful. — traktor, Dec 12 '17 at 22:47

score 0 · Answer 1 · answered Dec 12 '17 at 23:05

Thanks for the details! It helps seeing the problem on the live site. It looks like you're using Wordpress, so I'd recommend enqueueing this script using the functions.php file and the wp_enqueue_script function.

Using this, you can control where the script loads and specify it if has any dependencies, like jQuery.

Here is some documentation on usage.

If this seems confusing, let me know and I can try to help further.

score 0 · Answer 2 · answered Dec 13 '17 at 08:25

Thanks for the help! Once I set the 10 second window delay, I realized the trouble is not actually with javascript load order, as it's an issue with flexbox. (The "color" slide that overlays as the transition is taking up 100% of the screen vs only 70%.) I'll ask a separate question about that!

Loading javascript after html page load

2 Answers2