Menu
I've got some jQuery code that requires 2 external .js to complete loading before I can successfully do what I need to do, and $(document).ready isn't working consistently enough; sometimes it works, other times it gets overwritten by the external .js code.
Is there some way to ensure that the page is completely done loading, including all external .js before my jQuery executes?
525
To handle the asynchronous nature of JavaScript executions, you can use one of the three available methods to wait for a function to finish: This tutorial will help you learn all three methods, starting from using callback functions A callback function is a regular JavaScript function that you pass to another function.
It does not seem to wait for all other JS files to have executes, at least not in Firefox. Like the doc says, defer script loads when the page is parsed (instead of when js/css is loaded). This ain't a solution. Works very well with both async and defer while loading on scripts.
Use async/await to Wait for a Function to Finish Before Continuing Execution. Another way to wait for a function to execute before continuing the execution in the asynchronous environment in JavaScript is to use async/wait.
The await keyword allows you to wait until the Promise object is resolved or rejected: However, the await keyword must be used inside an async function. A function declared with the async keyword avoids the need to write a promise chain pattern. Here’s the full example of using async/await on functions that return Promise objects:
$(document).ready only waits for the DOM to be loaded. To wait until all resources in the page (including images, objects, scripts...) have been (down)loaded you can use window.onload:
window.onload = function () {
// do stuff
};
Additionally you should read: window.onload vs $(document).ready()
97
It's impossible know what's a better way when we don't know anything about your project but, in general, it's good practice to do all your script loading right before the closing </body> tag. Then make sure you're jquery code is loaded after it's dependencies are.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- your head stuff -->
</head>
<body>
<!-- your page markup here -->
<!-- load scripts here -->
<script src="library_with_no_dependencies.js"></script>
<script src="jquery.js"></script>
<script src="library_with_dependency_on_jquery.js"></script>
<script src="your_js_code.js"></script>
<script>
// or you could embed your js here
</script>
</body>
</html>
Just list them in the same order that you want them to load in. Using this method you don't need to use jquery's $(document).ready or window.onload, and your code will be executed much sooner than using either of those methods.
You don't want to wait for everything to load, just the libraries that your javascript code is dependent on.
41
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
