This should be simple, unless I’m missing something. Why not load jQuery in the document HEAD rather than the bottom of the BODY? I found after a good bit of experimenting that I cannot use any jQuery code in an EMBEDDED script because jQuery has not been loaded yet. Or is there a way to do it that I missed? My only solution was to include it in a custom code in the BODY, which means it loads on every page. Yuck.
1 Like
If you include custom code with an HTML widget in the body of one of your page, it’s not loading for every page, just this page.
But if you call jquery from the Head section of the custom code panel of your sites’ dashboard, yes, it’s loading for every page.
But if you include custom code in an HTML widget in the body, jQuery hasn’t loaded yet. So you get a JS error saying $ is not defined. I’m suggesting that Webflow move the jQuery loading to the HEAD section, so that custom code in the BODY will already have jQuery loaded. Note that I’m talking about the jQuery LIBRARY, not any custom code.
I think that is the purpose and reason for document ready:
$( document ).ready(function() {
console.log( "document loaded" );
});
Examples and use: $( document ).ready() | jQuery Learning Center
Yes, I understand document ready. But if you embed the code you just wrote, Javascript will bail out on it because the jQuery library has not been loaded yet. Therefore Javascript does not understand the $ variable in the first line. My point is that if Webflow would load the jQuery library in the HEAD rather than after all the content in the BODY, then you could embed a script that includes jQuery code anywhere on a single page. As it is now, I know of no way to do that except to go to the Dashboard and put it in the Custom Code, Head, or Custom Code, Body (which is loaded AFTER the jQuery library).
1 Like
Yeah there are times when you need jQuery in head. I’m trying to setup an image pre-loader js and it’s pointless to wait for the whole page to load before that kicks in… I mean loading it last is good and it works great within the WF environment but limits you often if you try to go beyond that…
You can always set up if...else...then or switch...case to verify on which subpage you are on right now. What do you exactly need to do that is not possible with jQuery being loaded in the end?
Quoting from Yahoo article:
The problem caused by scripts is that they block parallel downloads. The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel. While a script is downloading, however, the browser won’t start any other downloads, even on different hostnames.
When you put scripts in<head>tag, the browsers goes for them thereby keeping other stuff on hold until scripts are loaded which users will perceive like slow loading of the page. This is why you should put scripts at the bottom.
As for:
$(document).ready(function(){/*Code goes here*/});
It is fired when DOM is available and ready to be manipulated. If you put your code at the end, you won’t necessarily need this but usually this is needed because you want to do something as soon as DOM is available for you.
It just seems strange to have to set up jQuery code in the Custom Code for the whole site, rather on the single page where you need it. Loading the jQuery library in the head would enable jQuery code to be inserted as embedded code wherever it is wanted.
I’m sure there are a lot of us who would prefer having both a site-wide Custom Code, AND an option of Custom Code for each page.
We’ve been asking for this feature (Page by Page Code and Site-wide custom code) a long time. We only hope it will come sooner than later.
1 Like
Site-wide custom code is already there what are you talking about. Just create a code in footer code section of Custom Code in your site dashboard. If you want something site-specific why don’t you use my solution of if...else...then or switch...case based on that URL is already in?
You can always use pure JavaScript for each site. jQuery is only letting us create code easier, but it’s a combination of what already exist in JavaScript.
Not everyone is a “JavaScript Ninja”, @bartekkustra. Evidently Webflow thinks it’s handy enough to have jQuery available that it adds it to every page. 
There actually IS a simple solution that might make ALL of us happy. If Webflow would change its jQuery loading code at the bottom of the body like:
<script>window.jQuery || document.write(‘<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>’)</script>
Then anyone who wants to could use Custom Code to load jQuery in the HEAD. I just tried this on exported code and it works fine. Even using jQuery 1.11.3. Even if we had the option of Custom Code on each page, we would still need something like this to avoid loading jQuery twice (which screws up lots of things).
1 Like
I was thinking of the same thing… At least have the default jQuery loading < script > from WF to check if it’s not loaded already (for the cases where I want to load jQueary in teh < head >)
1 Like
How hard would it be for Webflow to have a radio button where the designer could choose to have the jQuery library loaded in the HEAD or at the end of the BODY? Or as @cooldept suggests, load in the BODY if it has not already been loaded in the HEAD.