ShouldIi unload javascript script? - javascript

i want to know if it will effect the site to not unload javascript and css files, when other files are keep loading on the site. well im creating functionality like facebook with ajax, so i was wondering if i have to unload the javascript/css resource on new page call.
Little more explanation: ok when you go to facebook.com, it start loading the page in background with ajax. and if you click on any page/profile/section it will load the required css/javascript for it, but im not sure if they unload the required javascript, which no longer need on new request. so i was wondering, should i leave the javascript which was loaded previously or should i remove it, cause removing is not hard part, just keeping track might be little complex for a big site.
any pros/cons?

The only way you could "unload" javascript would be to unset the script objects created by the loaded script.
So if you script is:
var awesome = {
init : function()
{
/** init stuff **/
},
do_stuff : function()
{
/** do awesome stuff **/
}
}
You could technically "unload" it by doing something like:
awesome = null;
But you'd have to be pretty tidy with your loaded script.. and there's still the potential issue with event handlers still being attached to some elements of the dom.

You should put logic in place that determines whether you need to load the script in the first place. If it's not necessary for the particular page/view, then don't load it.
The only way to "unload" that I can think of is to reload the page without it, which seems like a terrible idea IMHO.

Related

Chrome Extensions: Use a content script to modify existing scripts on a web page?

I'm creating a chrome extension that needs to hook into another script that already exists on my target web page. For simplicity's sake, I'm trying to find the following existing script element on a page and add a console.log() to it.
<script type="text/javascript">
var viewModel = new ScenePlayViewModel('', 'Ace', false);
viewModel
.load('jgWJJ2qsxx')
.then(function () {
sceneDOM = new SceneEditDOM2(viewModel.scene());
sceneDOM.init();
viewModel.isSubmitViaShareUrl(false);
viewModel.isSubmitViaUnityPackage(false);
console.log("HOOK INJECTED"); <--------------------------------------------- line to add
});
</script>
I've tried a number of solutions but none of them have seemed to work. For example, I've tried using a content script to find the script and replace the text, but it appears to run the pre-change script instead of my modified code.
// replaces javascript on website, but doesn't run new version
var scriptLoadScene = $("script:contains('new ScenePlayViewModel')"); // find the script
scriptLoadScene.text("console.log('Hello World')"); // change the text
What should I do? Basically, I'm just trying to change/add scripts to the web page to add more features.
This doesn't exactly answer your question, but hopefully will help you find a solution.
First - hopefully someone with more knowledge than me will confirm or discredit this - from my understanding, the script code is only run once, on page load, unless otherwise triggered by some event. Since Chrome extensions are triggered after the page has loaded, this script will have already been run, and anything inserted after won't run unless triggered.
I suppose you could always call the function again after you've edited it, but I don't have the knowledge or experience to predict what would happen then.
In my experience, I've just added my own '' tags with the code I wanted to run by writing them into the DOM, either into the '' or '' element.
Best of luck.
-brent

JavaScript Will Not Load After DOM

I'm having trouble getting my JS to run after all my content has loaded. Right now on the site Im working on: http://hsvgridproject.com, the grid will not load the first time a user visit the site and needs a hard refresh before it will work. I believe I need to use a window.onload function of some sort but as I am still learning Java I'm not sure how to implement it into my project without breaking the code.
The script for the grid on homepage has a window tag surrounding it already (credit Codrops):
(function(window) {
Please let me know if you need more info. Thank you!
It's probably not working because you're executing your script before the DOM is fully loaded.
To ensure it's executed after the DOM is fully loaded, either move the script tag which executes your code right before the closing tag of the body element or use DOMContentLoaded event like this:
document.addEventListener("DOMContentLoaded", function(event) {
// execute your code
});

Javascript 1-2 second delay on page load, weird styling

I'm using Skrollr to animate & create parralax effects when scrolling the page, but there's a short lag which I guess is the Skrollr javascript/jQuery initialising.
Any ideas on how to avoid having the mess at the beginning?
The WP website in question is this one : http://hustynminepark.com
Thank You!
Unless I'm mistaken, the layout of your page entirely depends on the activation of the plugin. You can solve this problem by finetuning the CSS so that the initial page corresponds exactly to what you see after activation of the plugin.
Also, don't forget to minify (concatenate / uglify) your javascript files before loading them into the browser; this will speed up the loading of the page and the activation of the plugin.
Btw, the site looks pretty cool.
If I am correct you have a FOUC, you can use jQuery to detect when your DOM in ready then call init.
First of all you want to include the skrollr.min.js file at the bottom of your document (right before the closing ) and then call skrollr.init(). Or you can place it inside the if you want to, but make sure to call init() once the document has been loaded (e.g. jQuery's ready event or even window.onload).

Javascript onload after redirect

in my Javascript code I am loading a page, and then would like to perform some functions. I tried to use solutions like window.onload, but that is after my html (blank page with just the JS) loads, I need the function to perform after the page I am reffering to is loaded.
I am using this code:
this.document.location.href = myurl;
And after this loads, I would like to call some function. Is there a way to do so?
Thanks
EDIT:
I can not edit the target page source code.
When you change the value of document.location.href, you are essentially doing a redirect.
You can either just do whatever you want to do within the loaded page itself or if you don't have cross domain issues, do xhr of the page you're wanting to load dynamically, query the body, replace content of your current body and also replace head contents i.e. style, title and scripts etc. You could then execute any script you want.
Extra note: This is quite a tricky thing to do, I've done this a few times before - and its proven quite problematic due to the fact that you don't actually get a fully parsed document object that you can just query so simply, you only receive a huge string. One hack that I've thought of using is actually just loading everything within an iframe allowing easy querying which is actually documented - extra reading here
window.load takes forever to fire because it waits for all images and assets to load on the page.
It sounds like the best solution for you would be to poll for the document to be finished loading. Here's a simple example:
(function poll(){
if(document.readyState === "complete"
{
// Your code here
}
else
setTimeout(poll,500);
})();
Place the 'window.onload = myFunction(){...}' inside the page, which will be loaded.
this.document.location.href
will open the page like you typed it into the browser address bar and your onload-script in the old page will not be executed in the new one.
By the way, you can shortcut it to document.location = myUrl
See the Document-API at Mozilla

Lazy loading the addthis script? (or lazy loading external js content dependent on already fired events)

I want to have the addthis widget available for my users, but I want to lazy load it so that my page loads as quickly as possible. However, after trying it via a script tag and then via my lazy loading method, it appears to only work via the script tag. In the obfuscated code, I see something that looks like it's dependent on the DOMContentLoaded event (at least for Firefox).
Since the DOMContentLoaded event has already fired, the widget doesn't render properly. What to do?
I could just use a script tag (slower)... or could I fire (in a cross browser way) the DOMContentLoaded (or equivalent) event? I have a feeling this may not be possible because I believe that (like jQuery) there are multiple tests of the content ready event, and so multiple simulated events would have to occur.
Nonetheless, this is an interesting problem because I have seen a couple widgets now assume that you are including their stuff via static script tags. It would be nice if they wrote code that was more useful to developers concerned about speed, but until then, is there a work around? And/or are any of my assumptions wrong?
Edit:
Because the 1st answer to the question seemed to miss the point of my problem, I wanted to clarify the situation.
This is about a specific problem. I'm not looking for yet another lazy load script or check if some dependencies are loaded script. Specifically this problem deals with
external widgets that you do not
have control over and may or may not
be obfuscated
delaying the load of the
external widgets until they
are needed or at least, til
substantially after everything else
has been loaded including other deferred elements
b/c of the how
the widget was written, precludes
existing, typical lazy loading
paradigms
While it's esoteric, I have seen it happen with a couple widgets - where the widget developers assume that you're just willing to throw in another script tag at the bottom of the page. I'm looking to save those 500-1000 ms** though as numerous studies by Yahoo, Google, and Amazon show it to be important to your user's experience.
**My testing with hammerhead and personal experience indicates that this will be my savings in this case.
The simplest solution is to set parameter domready to 1 when embedding addthis script into your page. Here is an example:
<script type="text/javascript"
src="http://s7.addthis.com/js/250/addthis_widget.js#username=addthis&domready=1">
</script>
I have tested it on IE, Firefox, Chrome, and Safari, and all worked fine. More information on addthis configuration parameters is available here.
This code solves the problem and saves the loading time that I was looking for.
After reading this post about how most current js libraries implement tests for a dom loaded event. I spent some time with the obfuscated code, and I was able to determine that addthis uses a combination of the mentioned doscroll method, timers, and the DOMContentLoaded event for various browsers. Since only those browsers dependent on the DOMContentloaded event would need the following code anyway:
if( document.createEvent ) {
var evt = document.createEvent("MutationEvents");
evt.initMutationEvent("DOMContentLoaded", true, true, document, "", "", "", 0);
document.dispatchEvent(evt);
}
and the rest depend on timers testing for existence of certain properties, I only had to accommodate this one case to be able to lazy load this external JS content rather than using the static script tags, thus saving the time that I was hoping for. :)
Edit: If the goal is simply to have your other contetn load first, try putting the <script> tags near the bottom of your page. It will still be able to catch the DOMContentLoaded and the content that comes before will be loaded before the script.
Original:
in addition to loading on DOMContentLoaded, you could have it load if a certain var is set true. e.g.
var isDOMContentLoaded = false;
document.addEventListener("DOMContentLoaded",function() { isDOMContentLoaded = true; }, false);
then add to the other script file
if (isDOMContentLoaded) loadThisScript();
Edit in response to comments:
Load the script, and run the function that the DOMContentLoaded listener fires. (read the script if you're not sure what function is being called ).
e.g.
var timerID;
var iteration=0;
function checkAndLoad() {
if (typeof loadThisScript != "undefined") {
clearInterval(timerID);
loadThisScript();
}
iteration++;
if (iteration > 59) clearInterval(timerID);
}
var extScript = document.createElement("script");
extScript.setAttribute("src",scriptSrcHere);
document.head.appendChild(extScript);
timerID = setInterval(checkAndLoad,1000);
The above will try once a second for 60 seconds to check if the function you need is available, and, if so, run it
AddThis has a section on how to load their tools asynchronously.
Current 'best' solution:
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=[YOUR PROFILE ID]" async="async"></script>

Categories

Resources