LABjs
Loading And Blocking JavaScript: On-demand parallel loader for JavaScript with execution order dependencies
LABjs Script Loader :: Home dynamic script loader to improve website loading performance
The question is regarding the http://labjs.com – an awesome library for non-blocking JavaScript loading and dependencies managing.
I've read the docs, but I must be too tired or something – I couldn't find anything regarding DOM ready event. Are the scripts executed after the DOM's ready or not?
Perhaps if I do:
$LAB.script('my-library.js').wait(function(){
// interacting with DOM
});
Will it be safe? Or should I use some kind of $(function() {}) etc.?
Source: (StackOverflow)
Looking for any advice on experiences between these two javascript loaders ?
head.js('some-script-here.js');
Or
$LAB.script("framework.js").wait();
Can anyone provide any guidance on these and whether one is better than another ? I'm struggling to find any articles with comparisons or which is better to use ?
Source: (StackOverflow)
I am sure I don't fully understand this problem, but it seems that we are seeing strange behavior on IE9 on my project, somehow related to out-of-order execution of JavaScript that has been injected via calls to document.write, e.g.:
document.write('<scr'+'ipt type="text/javascript" src="'+file1+'"></src'+'ipt>');
document.write('<scr'+'ipt type="text/javascript" src="'+file2+'"></src'+'ipt>');
document.write('<scr'+'ipt type="text/javascript" src="'+file3+'"></src'+'ipt>');
My limited Google research suggests that IE9 will execute scripts injected in this manner in a different order from other browsers (notably, Firefox and Chrome). Is there a better way to achieve what we're going for here, which will ensure the same execution order by all browsers?
I take that back: we don't really care about all browsers, just Chrome and IE9.
Source: (StackOverflow)
I keep getting this error when loading my Angular app. In Chrome a couple refreshes and my app will run but IE and FF is a no go.
The error links me to this error page but I don't really understand what it says.
I am loading my app using LabsJS including the controllers and service.
// spAppLoader.js
$LAB
.script("../js/app.js").wait()
.script("../js/controllers/userCtrl.js")
.script("../js/controllers/groupCtrl.js")
.script("../js/controllers/siteCtrl.js")
.script("../js/services/userServices.js")
.script("../js/services/groupServices.js")
.script("../js/services/siteServices.js")
Markup:
<div id="mdContainer" ng-app="spApp" ng-cloak>
...
</div>
<script type="text/javascript" src="../js/spAppLoader.js"></script>
I wanted to post more code but I don't know where to start and with angular everything is in multiple files. I uploaded it through github.
Source: (StackOverflow)
i use lab.js 2.0.3 for parallel loading my scripts.
the problem is, that in 1 of 10 times the "$(window).load" part fired much too early. the part with "$(document).ready" works fine.
example:
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/labjs/2.0.3/LAB.min.js" type="text/javascript"></script>
<script>
$LAB
.script("script1.js")
.script("script2.js")
.script("script3.js")
.wait(function(){
$(window).load(function() {
// Function 1
$("jQuery Function 1");
// Function 2
$("jQuery Function 2");
});
$(document).ready(function() {
// Function 3
$("jQuery Function 3");
// Function 4
$("jQuery Function 4");
});
});
</script>
i guess, that i do something wrong, but don't know what : (
Source: (StackOverflow)
I have been trying to make my website performs well. One way that may achieve this is by including a loader like LAB.js script inline within my HTML, and then load my scripts in parallel in the next line.
So, inside LAB.js library that contains a bunch of codes, there is this particular line of code{var c=/^\w+\:\/\//,d;if(typeof a!=q). When I put that piece of code inline inside the script tag of my HTML, it works well both In mozilla and chrome..but then..it fails in this browser called internet explorer 8 built by this great software company called "microsoft".
take a look at the part where there is "\/\//". Those last two characters "//" are parsed without any problem in both mozilla and chrome. However in IE, the last two characters are parsed as comment operators, therefore, any codes after those last two lines are rendered as comments (useless). This is really unbelievable. In IE, the rest of the codes after those two characters are literally useless and green colored (as in comment) Have anyone seen this issue happening before? Pls help. thanks.
In Mozilla and chrome: (last two characters)"//",d;if(typeof a!=q)
In IE: //,d;if(typeof a!=q)
Source: (StackOverflow)
I made a few tests with lab js in one of the sites I've developed and got a reduction of 200ms in the page load time. The total time spent now after backend processing is around 1.5 seconds.
I was wandering if its worth the trouble. Is 200ms a huge gain? A ridiculous one? I know that page load times affect page ranking, but 200ms will make such a big difference?
Source: (StackOverflow)
I'm trying to improve the load time of my web page using LABjs. However I'm getting 'Undefined not a function' in relation to jQuery.cookie('mycookie') which I'm using in my own jQuery script.
I'd be grateful for some advice on how to implement LABjs to deal with this as I don't quite understand the documentation.
Here's the code I have so far:
HTML
I have jQuery and LAB.min.js in the footer of my HTML page
<script type="text/javascript" src="myfolder/jquery1.9.1.js"></script>
<script type="text/javascript" src="myfolder/LAB.min.js"></script>
LAB.min.js file
Here I load my scripts in order. ratings.js depends on jquery-cookie.js, so I've included a wait() first to make sure that jquery-cookie.js is loaded first.
//ALL THE LABjs code is here, but not included on this post!
$LAB.setGlobalDefaults({Debug:true});
.script("myfolder/bootstrap.min.js")
.script("myfolder/jquery-cookie.js")
.wait()
.script("myfolder/ratings.js");
ratings.js
ratings.js is a long piece of code contained within the jQuery(document).ready function.
jQuery(document).ready(function() {
//LOTS OF CODE HERE
if(jQuery.cookie('mycookie')==null){
//LOTS OF CODE HERE
}
//LOTS OF CODE HERE
});
I'm getting an error in ratings.js relating to the line of code containing jQuery.cookie('mycookie'). It says "Uncaught type error: undefined is not a function"
From what I understand, jQuery.cookie() isn’t yet defined when I try to pass it to .wait(). What is the best way to get this to work, keeping in mind that I want to keep ratings.js in a separate js file because it contains a lot of code and is one of many similar js files that also throw up the same error when I load them with LABjs.
Many thanks!
Katie
Source: (StackOverflow)
Here is an example: http://ci.elfster.com/core/login.aspx
Look at the net tab in Firebug and you will see that scripts still have a substantial blocking period.
Does anybody have a working example that shows ten scripts downloading in parallel without blocking using LABjs?
Thanks!
Source: (StackOverflow)
Trying to implement LABjs on a new site. Seems very straight-forward to implement, except that it doesn't appear to be loading my scripts at all. When I examine my site in Firebug, it gives errors about not being able to access my JS files.
The paths on these JS files should be correct because as soon as I copy them out of LABjs' format and into normal script tags, they load fine.
Pretty mystified why this isn't working. Help appreciated!
Code excerpts:
<script type="text/javascript" src="../javascript/LAB.js"></script>
<script>
$LAB
.script("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js")
.script("../javascript/jquery.jcarousel.js")
.script("../javascript/jquery.fancybox.js")
.script("../javascript/jquery.timer.js")
.script("../javascript/jquery.slideshow.js")
.script("../javascript/common.js")
.script("../javascript/common.homepage.js")
.script("../javascript/swfobject.js")
.script("../javascript/jwplayer.js")
</script>
Source: (StackOverflow)
I am getting the error specified in the question title for the following code snippet :
$LAB.queue(function init() {
FB.init({
appId: '00000000',
status: true,
cookie: true,
xfbml: true,
logging: '0'
});
}
if(window.FB) {
init();
} else {
window.fbAsyncInit = init
});
Any ideas as to what might be causing the error? I just cannot figure out the issue.
Source: (StackOverflow)
I am asynchronously loading scripts through LabJS and have a chain of dependent scripts. Now if one of the scripts in the chain breaks (in the sense that it can not be downloaded, or connection times out) I believe that the remaining scripts under the dependency chain will not be executed. In such an event, is it possible to provide a custom callback function to take appropriate measures if a particular script fails to load ?
If this is not possible with LabJS, is it possible with any other Asynchronous script loader ?
Source: (StackOverflow)
I'm trying to load two blocks of lab.js in different places but if I use functions in the second block from files loaded in the first block, they show as undefined.
This is the first block (loaded in the header template from my MVC project
<script>
$LAB
.script("<?php echo(GlobalConfig::$ROOT_URL); ?>scripts/jquery-1.10.2.min.js").wait()
.script("<?php echo(GlobalConfig::$ROOT_URL); ?>bootstrap/js/bootstrap.min.js").wait()
.script("<?php echo(GlobalConfig::$ROOT_URL); ?>bootstrap/js/bootstrap-datepicker.js").wait()
.script("<?php echo(GlobalConfig::$ROOT_URL); ?>scripts/libs/underscore-min.js").wait()
.script("<?php echo(GlobalConfig::$ROOT_URL); ?>scripts/libs/underscore.date.min.js").wait()
.script("<?php echo(GlobalConfig::$ROOT_URL); ?>scripts/libs/backbone-min.js").wait(function(){
$(document).ready(function(){
alert("loaded");
});
});
</script>
this is the second block loaded at a content template
$LAB
.script("../scripts/jquery-1.10.2.min.js").wait(function(){
$(document).ready(function(){
$(".test-badges").each(function( index ) {
$( this ).tooltip({
'show':true,
'placement': 'bottom',
'title' : 'Marca esta casilla si consideras que tu compañer@ debe responder igual.'
});
});
});
});
The functions from second block (.tooltip) are not loaded because they are a dependancy from jquery. There is no way to unify both blocks in just a block loaded in header (both files are completly independent and have content created dynamically, also it's not what I'm trying to achieve)
So the question is .. Is there a way to tell the second block to only load when the first block is completly loaded?
Many thanks!
Source: (StackOverflow)
I am using a Javascript Loader [ requireJS ] which loads scripts in parallel to content - however, I have a problem. i.e.
require('http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js');
Typically - as a 'backup' - I've used
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
document.write(unescape("%3Cscript src='/scripts/jquery-1.4.4.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
However, when using a java-script loader - this will ALWAYS render jQuery "undefined" - because JS and content is loaded in parallel.
The effect is basically that you are loading jQuery 2x - i.e. 1x through your javascript loader and 1 through "jquery == undefined".
How can I make the "backup" work with a javascript loader ?
Source: (StackOverflow)
Why ReferenceError: $ is not defined ?
<script src="LAB.js"></script>
<script>
$LAB.script("jquery/jquery.js")
</script>
</body>
<p><?php echo mt_rand(89,161464) ?></p>
<script>
//Uncaught ReferenceError: $ is not defined
$(document).ready(function(){
console.log('reddy');
$("p").css('color','red');
})
</script>
But work:
window.onload=function(){
$("p").css('color','red');
}
2.item1.js
var interface={name:'interface'};
item2.js
interface.hu={name:'int'};
$LAB.script("item2.js").wait();
$LAB.script("item1.js");
//Uncaught ReferenceError: interface is not defined
Help
Source: (StackOverflow)