0

I have the folowing problem:

My site is loading jQuery in the head section. It has the "async" flag so it's loading asynchronisly. I have written some functions using jQuery und manipulating the content.

When I implement this functions at the end of the jQuery file, sometimes jQuery is loaded before the whole DOM of the website. That means my functions cannot find the special elements and don't do anything. If I implement this funktions at the end of the HTML file, when the DOM is already loaded, it happens that the webpage is finished but jQuery not. Then I get the error that the jQuery reference is not defined.

Has anyone an idea how i can fix this dilemma? Loading JS asynchronisly and calling functions, when DOM and JS file has been loaded?

Thanks, Jens

user1956194
  • 19
  • 4
  • 3
    Don't load jQuery asynchronously? – JJJ Jun 14 '14 at 17:17
  • Make your other `script` tag async as well? *"When I implement this functions at the end of the jQuery file, sometimes jQuery is loaded before the whole DOM of the website."* I'm not even going to ask why you add your code to the jQuery file. However, I hope you know about the `ready` handler, which executes code as soon as the DOM is loaded: https://learn.jquery.com/using-jquery-core/document-ready/ – Felix Kling Jun 14 '14 at 17:19
  • Isn't it all about jQuery $(document).ready()? – mkubacki Jun 14 '14 at 17:24
  • @fallenPhantasm - That is not what [`.ready`](http://api.jquery.com/ready/) is for, since `$` won't even be usable if jQuery is not loaded. – Derek 朕會功夫 Jun 14 '14 at 17:28
  • If you *are* going to load asynchronously, use one of the "AMD" loaders; Require.js is pretty popular, but there are others - in short, this "problem" is already solved. http://stackoverflow.com/questions/12117935/how-do-amd-loaders-work-under-the-hood , http://stackoverflow.com/questions/22951407/wait-for-async-completion-before-returning – user2864740 Jun 14 '14 at 17:40

4 Answers4

2

This isn't that difficult and doesn't require additional libraries or polling like the other answers suggest.

Script tags, including ones marked async, support an onload() function to call when they are loaded, and jQuery has the $(document).ready() method for when the DOM is loaded. You need to wait for both. So:

<script async src='jquery.js' onload='jqueryloaded()'></script>
<script>
    function jqueryloaded() {
        $(document).ready(function () {
            // all your code
        });
    }
</script>

jsfiddle example

bhamlin
  • 5,177
  • 1
  • 22
  • 17
  • Thank you very much for this great hint! I implemented it the same way you said, but I get pthe error, that 'jqueryloaded' not defined is. Is it possible that loading jQuery can be faster then loading the whole HTML file and than it tries to call this function? Or do you have any other suggest? – user1956194 Jun 14 '14 at 19:30
  • Hmm... it might be possible if jquery is already cached, although I would still expect it to parse the page before running. The `async` functionality isn't consistent across browsers. But to get that error, I would double check your code for typos. – bhamlin Jun 15 '14 at 00:13
  • I added the function this way: 'function jqueryloaded() { my code }'. This is the code where jQuery is implemented: ''. I have seen that safari manipulates the async and looking at the html source code I get 'async=""'. – user1956194 Jun 15 '14 at 12:29
  • I solvd the problem using the solution of bhamlin. But I changed the oder. First Indeclare the function and then I use the onload event. That works very good and I don't have any problems. ThanksM – user1956194 Jun 21 '14 at 10:49
0

use require.js.

Alternatively you can write something like this, which is not best practice:

var checkforjquery = setInterval(function() {
  if (window.jQuery) {
    clearInterval(checkforjquery);
    // all your jquery functions
  }
}, 100);
Alex
  • 9,911
  • 5
  • 33
  • 52
  • 2
    Uhhh. You can't use `$(window).load()` or `$(document).ready()` when jQuery isn't loaded yet. – jfriend00 Jun 14 '14 at 17:19
  • thats why i added the interval function – Alex Jun 14 '14 at 17:20
  • 1
    Your answer reads that you can do either the first thing OR the second thing. If you intended something different, then please edit your question to clarify. – jfriend00 Jun 14 '14 at 17:21
0

You can use depend.js library. Include (synchronously) the depend.js file in your head element, wrap the jquery code in

Library(
 "jquery",
 function(){
  //The jQuery itself goes here
});

and wrap every script that needs jQuery by this:

Script(
 "any-name",
 ["jquery"],
 function(){
  //The script body
});

You can use it even for your libraries. If a library depends on another library, just use Library("mylib",["dependency1","dependency2"],f);, where f is the library body.

Hope it helps.

m93a
  • 8,866
  • 9
  • 40
  • 58
-1

Put all the javascript at the end of your page, jQuery first. Something like this:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <!-- jQuery -->
<script src="script.js"></script> <!-- your code -->
</body>
</html>
John_C
  • 1,116
  • 8
  • 17