I'm using the following code to allow parallel JavaScript downloading on my website
var head = document.getElementsByTagName("head")[0];
var sTag1 = document.createElement("script");
sTag1.type = sTag1.type = "text/javascript";
sTag1.src = "http://example.com/one.js";
var sTag2 = document.createElement("script");
sTag2.type = sTag2.type = "text/javascript";
sTag2.src = "http://example.com/two.js";
var sTag1 = document.createElement("script");
sTag3.type = sTag3.type = "text/javascript";
sTag3.src = "http://example.com/three.js";
head.appendChild(sTag1);
head.appendChild(sTag2);
head.appendChild(sTag3);
However, using YSlow, it shows that even though one.js, two.js and three.js are downloading in parallel - images are not loading until the last JavaScript is fully downloaded.
What can I do to allow images to not be blocked from loaded due to my JavaScript files downloading.
Load your Javascript files right above the </body> tag.
Where are you triggering that code from? Because you could wait to execute your quoted code until you see the window.load event, e.g.:
<script type='text/javascript'>
function loadMyScripts() {
/* ...your loading code here...*/
}
window.onload = loadMyScripts; // Or use addEventListener/attachEvent to do it
</script>
The window.load event isn't fired until all of the images are loaded, so you'll be sure the scripts aren't getting in the way. Of course, it also leaves quite a large margin of time for the user to start doing things with the page, so you need to be sure the page doesn't need that JavaScript to be functional.
Related
I am trying to write a small check that will test for jQuery, and if not present, dynamically load a copy so that a script can be run by it. It sets to no conflict in case anything else is present that also uses $, and then runs the script - a small menu.
However, upon actually testing this jQuery is loaded from the script, but fails to execute: "jQuery is not defined."
I know that jQuery has to come first before any functions that use it, but is there any way to fix this when it is dynamically installed?
(function() {
console.log("Loaded");
if(!window.jQuery) {
var script = document.createElement('script');
script.type = "text/javascript";
script.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(script);
jQuery.noConflict();
}
})();
You're not waiting until the script has loaded.
script.onload = function(){
// do whatever
};
I'm dynamically adding script usign:
var el = document.createElement("script");
document.getElementsByTagname("head")[0].appendChild(el);
It seems neither script.onload nor document.onreadystatechange could be used to determine the end of loading process. How should I catch dynamic script load completion?
The onload event needs to be attached before setting the script's src, which is what causes the script to start loading.
Example:
var el = document.createElement("script");
el.onload = function() {
// Script is loaded
}
el.src = ...
I think you want something very similar to this: Trying to fire the onload event on script tag
$body.append(yourDynamicScriptElement);
yourDynamicScriptElement.onload = function() { //...
yourDynamicScriptElement.src = script;
I have this code in a script we use for initializing all of our applications, it loads the jQuery from the google CDN amongst several other things that all of our applications require. Then when we load the specific program functionality we check to make sure that jquery has loaded, in case the CDN is down. The problem I am running into is it is still loading the second one. If I add a simple alert("Test"); after the line headTag.appendChild(jqTag); it works perfectly, but if I remove the alert it uses the second one. What gives?
They are loaded like so:
<script type="text/javascript" src="i-initializer.js"></script>
<script type="text/javascript" src="i-program.js"></script>
initializer script:
if(typeof jQuery=='undefined'){
var headTag = document.getElementsByTagName("head")[0];
var jqTag = document.createElement('script');
jqTag.type = 'text/javascript';
jqTag.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js';
headTag.appendChild(jqTag);
}
Then in another script we have the following:
if(typeof jQuery=='undefined'){
var header = document.getElementsByTagName("head")[0];
var qtag = document.createElement('script');
qtag.type = 'text/javascript';
qtag.src = 'http://feedback.oursite.com/scripts/jquery-1.8.3.min.js';
qtag.onload = checkjQueryUI;
header.appendChild(qtag);
}
else
{
jQCode();
}
jQCode() {
...
}
This is the technique used by HTML5 Boilerplate. First it loads the Google CDN script, then immediately checks if the global jQuery object exists -- if it doesn't, the CDN failed and a local copy is loaded instead.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.3.min.js"><\/script>')</script>
Your fallback code loads jQuery asynchronously.
That means that the rest of your scripts run before jQuery loads.
Adding an alert() call forces the rest of your code to wait (until you click OK); by the time that happens, jQuery will have loaded.
Instead, you can emit a new <script> tag using document.write() to load it synchronously.
Alternatively, you could wrap the rest of your code in a callback and call the callback(s) after jQuery loads.
If you do it this way, you should use a script loader library, which will handle all of that for you.
I have a webpage that is rich in content such as graphics and javascript. Now the problem is that my page loads too slow, especially with slower internet connections. Now at the bottom of my webpage I have a jquery slider, which is the least important item on my website.
now...
Is there a way I can postpone or delay the loading of that whole slider(which has a div ID as parent element) until directly after everything else has loaded on my page, and not alongside the rest of the more important content?
Absolutely, you might want to look up javascript loader like RequireJS or LABjs.
The principle is that you inject the script-tag that loads your javascript. For instance, you could have the following code as the last element before your </body>-tag:
<script type='text/javascript'>
var head = document.getElementsByTagName("head")[0];
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = 'url/to/script.js';
head.appendChild(newScript);
</script>
Here is what i want to do.
Normally we can call javascript functions on different event, button clicks within the page provided that script is already in the page (may be in head section) or it has been loaded in the head section from external js file on load time.
Is it possible to load an external js file not when the page loads but at a later stage when (say) a button is clicked.
I know this is easily possible in JQuery:
$.getScript("url to js file", function(){});
But i want to know how can we do the same using simple javascript within the page without JQuery?
Dynamically create the script element :
<script>
var oHead = document.getElementsByTagName('HEAD').item(0);
var oScript= document.createElement("script");
oScript.type = "text/javascript";
oScript.src="other.js";
oHead.appendChild( oScript);
</script>
You do it like this:
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'helper.js';
head.appendChild(script);
<script language="javascript">
document.write("<script src='other.js'><\/script>");
</script>
other options are here