加载html页面后加载javascript

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!

Answer 1

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.

Answer 2

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!