Menu
I have a web page. When this web page is loaded, I want to execute some JavaScript. This JavaScript uses JQuery. However, it appears that when the page is loaded, the jQuery library has not been fully loaded. Because of this, my JavaScript does not execute properly.
What are some best practices for ensuring that your jQuery library is loaded before executing your JavaScript?
970
To add jQuery and JavaScript to your web pages, first add a <script> tag that loads the jQuery library, and then add your own <script> tags with your custom code.
What is the best way to make sure javascript is running when page is fully loaded? If you mean "fully loaded" literally, i.e., all images and other resources downloaded, then you have to use an onload handler, e.g.: window. onload = function() { // Everything has loaded, so put your code here };
Press F12. Go to console. Type jQuery and press enter. In case, your app is not using jQuery, then you'll get error.
There are several answers already, each of them work great but all of them depend on making sure jQuery is downloaded synchronously before any dependencies try to use it. This approach is very safe, but it can also present an inefficiency in that no other resources can be downloaded/run while the jQuery library script is being downloaded and parsed. If you put jQuery in the head using an embedded tag, the users browser will be sitting idle while downloading and processing jQuery when it could be doing other things like downloading images, downloading other scripts, etc.
If you are looking for speedy responsiveness on startup, every millisecond counts.
A huge help to me over the last year or so has been Steve Souders, first when he was at Yahoo, and now at Google. If you have time, check out his slides for Even Faster Web Sites and High Performance Web Sites. Excellent. For a huge paraphrase, continue here.
When attaching javascript files to the DOM, it has been found that putting an inline <script> tag in the <head> of the document causes most browsers to block while that file is being downloaded and parsed. IE8 and Chrome are exceptions. To get around this, you can create a "script" element via document.createElement, set the appropriate attributes, and then attach it to the document head. This approach does not block in any major browser.
<script type='text/javascript'>
// Attaching jQuery the non-blocking way.
var elmScript = document.createElement('script');
elmScript.src = 'jQuery.js'; // change file to your jQuery library
elmScript.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild( elmScript );
</script>
This ensures that jQuery, while downloading and parsing, is not blocking the downloading and parsing of any other images or javascript files. But this could present a problem if you have a script that depends on jQuery finishes its download before jQuery does. jQuery won't be there and you will get an error saying $ or jQuery is undefined.
So, to ensure that your code will run, you have to do some dependency checking. If your dependencies are not met, wait for a little while and try again.
<script type='text/javascript'>
runScript();
function runScript() {
// Script that does something and depends on jQuery being there.
if( window.$ ) {
// do your action that depends on jQuery.
} else {
// wait 50 milliseconds and try again.
window.setTimeout( runScript, 50 );
}
}
</script>
Like I said earlier, there are no problems with the approaches shown before, they are all valid and all work. But this method will ensure that you are not blocking the download of other items on the page while waiting for jQuery.
This approach will work for any file, so if you have to include 10 js files, you can attach each of them using this method. You just have to make sure your check function checks for every dependency before running.
78
The jQuery library should be included in the <head> part of your page:
<script src="/js/jquery-1.3.2.min.js" type="text/javascript"></script>
Your own code should come after this. JavaScript is loaded linearly and synchronously, so you don't have to worry about it as long as you include the scripts in order.
To make your code execute when the DOM has finished loading (because you can't really use much of the jQuery library until this happens), do this:
$(function () {
// Do stuff to the DOM
$('body').append('<p>Hello World!</p>');
});
If you're mixing JavaScript frameworks and they are interfering with each other, you may need to use jQuery like this:
jQuery(function ($) { // First argument is the jQuery object
// Do stuff to the DOM
$('body').append('<p>Hello World!</p>');
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
