If you really and truly want to add a script to your page after it loads, the following code will work:
(function() {
var po = document.createElement('script');
po.type = 'text/javascript'; po.async = true;
po.src = 'http://pathtoyourscript.com/script.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
Your final adjustBanner function would be something like:
function adjustBanner(width) {
width = parseInt(width);
var src = ' ';
if ((width >= 960) && (width < 1280)) {
src = 'edge_includes/index_edgePreload.js';
} else if (width >= 1280) {
src = 'edge_includes/index1250_edgePreload.js';
}
var po = document.createElement('script');
po.type = 'text/javascript'; po.async = true;
po.src = src;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
}
What this code is doing is appending a script tag to your page, causing your browser to load it immediately. When the script loads, the JavaScript interpreter in your browser will just go ahead and run the script sources. If you mutate or modify a variable, global, or module in JavaScript, that modification will happen as soon as the JavaScript interpreter receives the sources.
Depending on what your script sources are doing, you might want to be careful about calling this on every window.resize event without cleaning up old scripts (e.g. setting modules to undef). This is because every time that you resize the window, the script associated with the current resolution will be appended to the document sources, mutating any variables already set in JavaScript's context.
Call me crazy, but you might want to consider using CSS media queries instead of JavaScript/jQuery to accomplish what you want. You would define the style for a specific resolution and then magically the browser will do the right thing based on its current window's resolution. Your conditionally loaded scripts (running animations) would need to be resolution-aware but this seems better than swapping out JavaScript on your page.
As an example:
<html>
<style>
@media (max-width: 700px){
#smallCage { display: block; }
#mediumCage { display: none; }
#largeCage { display: none; }
}
@media all and (min-width: 701px) and (max-width: 1000px) {
#smallCage { display: none; }
#mediumCage { display: block; }
#largeCage { display: none; }
}
@media all and (min-width: 1001px) {
#smallCage { display: none; }
#mediumCage { display: none; }
#largeCage { display: block; }
}
</style>
<body>
<div id="smallCage">
<img src="http://www.placecage.com/200/300" />
</div>
<div id="mediumCage">
<img src="http://www.placecage.com/400/600" />
</div>
<div id="largeCage">
<img src="http://www.placecage.com/800/1200" />
</div>
</body>
</html>
In this example, I have 3 different sized images and can render them selectively based on the browser resolution. You could do the same thing with canvas elements or whatever you are using for your JS animations.
A final alternative would be to have the actual JavaScript performing the animation be aware of the browser width and then do the right thing when the screen resizes.
