Javascript: Detecting script load completion - javascript

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;

Related

How to make Chrome fire the load/onload event on a script tag without jQuery

Problem: Chrome not firing load/onload on script elements.
The issue has been mentioned previously in,
Chrome not properly observing onload event on script tags?
Trying to fire the onload event on script tag
It looks like a proper answer hasn't been given about how to make it happen without jQuery.
Im using somting like this in script and it works ok.
const url = `https://cdn.jsdelivr.net/npm/vue#2.6.14/dist/vue.js`
const script = document.createElement('script');
script.async = true;
script.onload = () => console.log("script loaded")
script.src = url;
document.head.appendChild(script)

Reload JS file on window resize

How can I reload a single JS file on a window resize? I only need to reload a single JS file every time I resize the window so it wil reset the JS file. I have found here a script long time ago, but I can not find him.
<script src="js/scripts.js" type="text/javascript"></script>
Thnx gr Pascal
I don't see jQuery tagged, so the other responses likely won't work for you.
You basically need to capture the window resize event, which occurs for (practically) every pixel the browser is resized. This means you'll need to use setTimeout to wait for a finished resize (otherwise, you'll be reloading a script 1000x for every resize). Then you can set the source of the script to the same file, appending a timestamp that will force a non-cached refresh.
Here's how I would implement this: (http://jsfiddle.net/gbez11h2/)
HTML:
<script id="scriptToReload" type="text/javascript" src="path/to/script.js">
Javascript:
;(function (w, d) {
"use strict";
var timeout = null,
scriptEl = d.getElementById('scriptToReload'),
scriptSrc = scriptEl.src,
delay = 500; // How long to wait (in ms) before deciding resize is complete
w.onresize = function () {
// Clear previous timeout to indicate resizing is still occurring
w.clearTimeout(timeout);
timeout = w.setTimeout(function () {
// Resizing is (probably) done, now we can reload the script
// Start by destroying previous script element
scriptEl.parentElement.removeChild(scriptEl);
// Now we recreate the same element, with a timestamp cache-buster
scriptEl = d.createElement('script');
scriptEl.type = 'text/javascript';
scriptEl.src = scriptSrc + '?_=' + (new Date().getTime());
// And insert it into the DOM to be (re-)loaded
d.getElementsByTagName('head')[0].appendChild(scriptEl);
}, delay);
};
})(window, document);
Note that the Javascript will need to either go after the original <script> definition, or placed into a window.onload function.
you could try to append new script tag like that:
$(function(){
$('button').click(function(){
var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.src = 'https://**.js';
$("head").append( script );
});
})
Like this:
function bind()
{
$(window).resize(function () { $("#scriptToReload").attr("src", "reloadedScript.js"); });
}
$(document).ready( function () { bind();} );

Adding javascript to an HTML file and using document ready

So I have a static HTML page that I cannot edit and I need to add jQuery to it and then do some div manipulation (height) on document ready. I found this post which describes how to insert it into a page, which works great. I added that to my javascript file and it inserts it into the page. The problem is that I need to perform some actions on $(document).ready() on that same page, but it says that $ is undefined.
What I would like to do is something like this:
var script = document.createElement('script');
script.src = 'http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);
$(document).ready(function() {
// Resize my div's to the browser window
});
But I can't seem to get it to work. Is this possible? How?
var script = document.createElement('script');
script.src = 'http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js';
script.type = 'text/javascript';
script.onload = resize; //most browsers
script.onreadystatechange = function() { //ie
if (this.readyState == 'complete') {
resize();
}
}
document.getElementsByTagName('head')[0].appendChild(script);
function resize() {
//code goes here
}
This is due to the ready event firing before the JS jQuery file has loaded. Here is a good tutorial on how to do it.
http://www.ejeliot.com/blog/109
This isn't going to help your page performance though to load your jQuery like this. You should really try to minimize your JS and use as few requests as possible for the best user experience.
Also, you don't need to write
$(document).ready(function() { });
You can just write
$(function() { });

Add jquery script via script file

I have script (myscript.js) which create div and animate div in any HTML page. my script is using Jquery animation function
I am currently using following code (it's sample snippet)
<script src="jquery.js"><script>
<script src="myscript.js"><script>
But is this possible to use only following code which can automatically add JQuery library also?
<script src="myscript.js"><script>
Insert this on top of your myscript.js
var h=document.getElementsByTagName('head')[0];
var s=document.createElement('script');
s.type='text/javascript';
s.src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js';
h.appendChild(s);
but you will have to wait until script loaded using waitforload function
function w4l(){
if (typeof jQuery != "function"){
setTimeout("w4l()", 1000);
return;
}else{
//Do Jquery thing
}
}
w4l();
or just simply copy all jquery.js code file into your myscript.js, AKA merge 2 file into one
To make sure that the rest of myscript.js doesn't get executed before jQuery is loaded, use something like this:
function dostuff() {
//animate elements, etc.
}
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'jquery.js';
script.onreadystatechange = dostuff;
script.onload = dostuff;
head.appendChild(script);
Note: it's a bit unclear why you wouldn't want to explicitly add the jQuery part in your head.

JavaScript is blocking images from loading

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.

Categories

Resources