Develop Reference

Loading javascript after all other scripts

I'm using a CMS which has a lot of javascript, both in size and quantity.
I'm trying to add iframe.ly to it so that card previews can be generated for posted URLs.
It works perfectly fine on all pages except for ones that have posts (which are the most important), since posts are loaded via a javascript called stream, and it seems that iframely's script is loading before the stream.
I know this is the issue because I can trigger the script directly using iframely.load(), which does the trick. But I need this to happen automatically on every page load.
This is the script that I added to my header: <script defer charset="utf-8" src="//cdn.iframe.ly/embed.js?key=[my-api-key]" ></script>
Iframely offers another option in their docs, which is this:
<script defer type="text/javascript">
function loadIframelyEmbedJs() {
// Replace 'iframe.ly' with your custom CDN if available.
if (document.querySelectorAll("[data-iframely-url]").length === 0
&& document.querySelectorAll("iframe[src*='iframe.ly']").length === 0) return;
var iframely = window.iframely = window.iframely || {};
if (iframely.load) {
iframely.load();
} else {
var ifs = document.createElement('script'); ifs.type = 'text/javascript'; ifs.async = true;
ifs.src = ('https:' == document.location.protocol ? 'https:' : 'http:') + '//cdn.iframe.ly/embed.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ifs, s);
}
}
// Run after DOM ready.
loadIframelyEmbedJs();
</script>
This is supposed to make iframely "load only when required", as in when embeds are detected in the page. But that doesn't fix the problem either because that too is loaded before the stream.
I don't mind using jquery if needed.
Edit: Removed mentions of the CMS. It adds unnecessary confusion. This is a javascript question.

Fixed it by wrapping it in this function:
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "//cdn.iframe.ly/embed.js?key=[my-api-key]";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
Strange that it's so hard to achieve something like this, or find information on how to do it.
Source: Some SEO website that I can't find anymore.

Dynamic addition of script tag in Javascript [duplicate]

This question already has answers here:
How do I include a JavaScript file in another JavaScript file?
(70 answers)
Closed 6 years ago.
I am trying to add a script tag dynamically through Javascript in my HTML page. Just after the code I am trying to call a few functions of the newly added script. However, I am getting JS errors because by that time the script has not loaded yet. I have gone through multiple posts but none of them explains how to execute your script added explicitly.

You need to listen for the onload event of your newly added script, or onreadystatechange for IE < 11.
var script = document.createElement('script');
script.onload = function() {
// it's ready, so call your functions here
}
// now insert your new script into the document
For IE < 11:
script.onreadystatechange = function() {
if (script.readyState === 'loaded' || script.readyState === 'complete') {
// it's ready, so call your functions here
}
}

This will allow you to execute scripts when and only when the whole page has loaded. There are other ways to do this but I think this one is simple and effective:
<script>
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = './js/ding.js';
document.body.appendChild(element);
var element1 = document.createElement("script");
element1.src = './js/dong.js';
document.body.appendChild(element1);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
Place it on your page at the end of the body tag. Anything imported by this block of code will execute dead last, ensuring all scripts called in the head will be there.
I use this pattern all over the place because it is semantic. My 'library' type scripts are loaded in my head, and then my custom code waits for the whole dom to render before it executes.

combining inline scripts in <head>

i have the following code in the part of my html and was wondering how i could clean it up to optimize the loading.
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "js/jquery.orbit-1.2.3.min.js";
document.body.appendChild(element);
}
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "http://code.jquery.com/jquery-latest.min.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

If your goal is to allow the page to be displayed before the scripts are loaded, there's a much easier way: Just put the script tags (in the appropriate order) at the very end of the body, just before the closing </body> tag:
<!-- ...content of page... -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/jquery.orbit-1.2.3.min.js"></script>
</body>
</html>
The load event on the window object happens very late in the page load process, after all other resources have been completely loaded (or failed to load). So all images, both foreground and background, etc.
By putting the scripts right at the end of the body, you get them in the browser's download queue at a reasonable time, but without making the browser wait for the script to arrive before doing the initial page rendering. You also get the ordering (you'd get that with the defer attribute on the script element as well, but not all browsers support it). More: YUI Best Practices for Speeding Up your Website
You've asked in the comments when you would use the load event for script loading. My answer is: I've never had a reason for doing so.

Defer loading jquest and customer .js file (Using google snippet)

Google tells us we should defer loading of jquery until after the page has loaded.
I took the sample code that Google provides and modified it slightly so that the jquery library is loaded, a callback is invoked and my own custom .js file is then loaded.
It's pretty straightforward stuff.
Seems to work on FireFox, does not work on IE8.
My question:
Is there anything in the code that IE8 would not support.
(i.e. why is this code not running on IE8)
Thanks for your ideas.
David
<script type="text/javascript">
function downloadJSAtOnload()
{
getScript("//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js",function(){
getScript("/course/java/linguashop2013.js", function() {});
});
}
function getScript(url,callback)
{
var element = document.createElement("script");
element.src = url;
document.body.appendChild(element);
element.onload=callback;
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

In older IE there's no load event for script tags.
This article explains how to load scripts properly:
http://www.nczonline.net/blog/2009/07/28/the-best-way-to-load-external-javascript/

Chrome extension : jQuery.js conflicts in background file conflics with plugins in websites

I am including jQuery in background_page like this,
<script type="text/javascript" src="libs/jquery.js"></script>
Here's the problem:
In websites, where jQuery plugins are used (with jQuery.extend method), they do not work when my extension is installed.
I guess this is because I had my jQuery.js over 'their' jQuery.js' file and all .extend do not work.
So, I thought of adding jQuery.js only when its not avaialable. So, I tried adding jQuery like this,
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
var script = document.createElement('script');
script.type = "text/javascript";
script.src = "libs/jquery.js";
document.getElementsByTagName('head')[0].appendChild(script);
}
</script>
But no luck.
Can someone suggest me a good way to add jQuery.js file in background page.

I really like your approach here, but I would recommend enwrapping your declaration inside of a load event listener:
if (window.addEventListener) {
window.addEventListener('load', init, false);
} else if (window.attachEvent) { // for IE8 and below
window.attachEvent('onload', init);
}
function init() {
if (typeof jQuery === 'undefined') {
var script = document.createElement('script');
script.type = "text/javascript";
script.src = "libs/jquery.js";
document.getElementsByTagName('head')[0].appendChild(script);
}
}
I think the issue may be that at the time you're asking if jQuery is an object, that the DOM hasn't loaded yet.
Alternatively, you can load jQuery via your Manifest File under content_scripts: http://code.google.com/chrome/extensions/dev/content_scripts.html

Found an answer later,
Doing
jQuery.nocConflict
jQ = jQuery.noConflict
and replacing $ with jQ everywhere, solved the problem.
Conclusion: content_scripts can also interfere with webpage javascripts.