Work around to loading two instances of jQuery?

Question

We have some restrictions on the CMS we are using and the jQuery code is included in the footer of the page.

We use the code below to determine if jquery is available, however as jQuery is loaded after this script is included this always returns false resulting in our code not being executed.

if (typeof jQuery != 'undefined') {

Is it possible to force this to wait until full page load without using:

jQuery(document).ready(function($) {

Note: We are unable to move the jQuery code higher in the source and even implementing something like the below is probably not possible given the way the CMS is setup. (Very limited access to template files).

Load jQuery after DOM, how can I make $.ready() available to my page before jQuery is loaded?

If you include your script in an external js, you can add the defer attribute to it to cause it to wait until the dom is ready to execute. — Kevin B, Mar 19 '13 at 14:33
I think the only way possible could be using the browser based ready event. — Rutwick Gangurde, Mar 19 '13 at 14:34
@KevinB that would have worked but this is for Analytical tracking so we'd want support across all browsers and it doesn't look like this is supported (at least not fully) for a lot of IE browsers — williamvicary, Mar 19 '13 at 14:47
Would window.onload = function() {} work? I don't need to wait for anything else (images etc) to load before this code runs, all it is doing is manipulating the tags checking the href and sending Google Analytics calls based on the URL and forwarding the user to their requested destination. As long as window.onload = function() {} would wait for the jQuery code in the footer to load then this should work as expected. — williamvicary, Mar 19 '13 at 15:01
onload would work, but it could cause a considerable delay in your code executing. As long as that isn't a problem, then it will work. — Kevin B, Mar 19 '13 at 15:13

bipen · Answer 1 · 2013-03-19T14:58:53.327

1

have you tried this ...

The DOMContentLoaded event is fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading (the load event can be used to detect a fully-loaded page).

document.addEventListener('DOMContentLoaded',function(){ //codes })

edited Mar 19 '13 at 14:58

answered Mar 19 '13 at 14:35

bipen

36,319
9
49
62

This looks like it could solve my problem (works in tests) - do you know how I could find out how supported this is? (Ie if jQuery would be supported by the browser, would this?) – williamvicary Mar 19 '13 at 14:48
read here https://developer.mozilla.org/en-US/docs/DOM/Mozilla_event_reference/DOMContentLoaded_(event)?redirectlocale=en-US&redirectslug=Mozilla_event_reference%2FDOMContentLoaded_%28event%29 – bipen Mar 19 '13 at 14:59

score 0 · Answer 2 · answered Mar 19 '13 at 14:34

0

You can do the following with the HTML code

<body onlaod="checkjquery()">

And you would define that function as you wish

answered Mar 19 '13 at 14:34

Max Doumit

1,065
12
33

Unfortunately we can't access the main template so this isn't possible – williamvicary Mar 19 '13 at 14:49

Work around to loading two instances of jQuery?

2 Answers2