Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

How to load Javascript files in a particular order

I'm working on a website for my startup and I have an image at the top of the page (logo) followed by a navbar. The image is supposed to scroll away while the navbar stays at the top of your browser window as you scroll down (code for the responsive scroll is in a js file achieved through bootstrap 3 affix). I suspect the image is being loaded after the js which is causing a few issues.

The issue I'm most concerned about is the navbar doesn't always scroll down with the page. It always works (scrolls with the page) when I refresh the page which makes me think it has to do with the order elements are loaded, but I could be wrong. Does anyone know how to fix this?

The website is still rough but you can view source code here: https://oolaabox.herokuapp.com

3 Answers

I'm not having the same problem as you, so its hard for me to say how to fix it exactly. About loading the javascript after the image load, you can have an inline javascript to detect when the image is done loading, and then after its done loading append a script tag to the end of the html file. Also, if your problem is with the image loading, what could possibly help, is adding a height attribute to the image tag. Hope this helps.

It seems to be working for me on Chrome. To answer your other question, if you put your JS at the bottom of your HTML file, it will load after all other content has been loaded.

I ended up placing the JS in my HTML file rather than having it rendered in the header of my application.html.erb file.

Thanks for your replies, very helpful!