I am loading the following javascript files from a CDN. Is there any way I can check if these have been loaded correctly and if not, load them from a local folder?
http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js
http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/jquery-ui.min.js
http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js
I know I can check the jquery file but not sure about the others. Any tips?
In your HTML, you can do something like this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="js/jquery-1.4.2.min.js"><\/script>')</script>
The example shown is loading jquery from Google CDN and falls back on a local copy of JQuery if that fails.
Credits to HTML5 Boilerplate for showing the trick
YepNope.js is a more robust solution for loading resources (like js files), checking whether they've been loaded or not, and then providing a fallback if necessary. This is just 1 feature among many provided by the library.
Related
As I can see, loading jQuery every time I load a site is pretty slow. i.e.
<!-- jQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Site Scripts -->
<script type="text/javascript" src="js/myJS.js"></script>
Compared to downloading jQuery to my local file system and import it locally. i.e.
<!-- jQuery -->
<script type="text/javascript" src="js/jquery-someversion.min.js"></script>
<!-- Site Scripts -->
<script type="text/javascript" src="js/myJS.js"></script>
Obviously depends on my internet's speed at the time of loading the script.
I was wondering if there is a jQuery API of some sort that would allow me to "lazy load" it(jQuery) using HTML script tag. What I mean with lazy loading jQuery is: loading only the specific feature(s) I'm going to use, i.e.
<!-- jQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js/events"></script>
<!-- Site Scripts -->
<script type="text/javascript" src="js/myJS.js"></script>
Changed the source: < script .... src="http://code.jquery.com/jquery-latest.min.js/events"/ >
I know that I can look up for the jQuery code of that specific feature and load it myself when needed, but I do NOT want to copy the features into my local file system every time jQuery has an update or whatever. If you are still not getting where I'm going, what I want is to have a way in which I know that the features are UP TO DATE and SUPPORTED (by jQuery) so later bug-fixes/improvements/changes/additions/cross-browser-support to jQuery are "automagically" implemented in my site.
if you will use a cdn path, then it will not redownload the file if it has been cached previously. It increases the chance that there will be a cache-hit.
(As more sites follow this practice, more users already have the file ready.)
You can create your own build of jQuery but you will have to host it yourself.
Follow the "How to build your own jQuery" guide for instructions:
Special builds can be created that exclude subsets of jQuery functionality. This allows for smaller custom builds when the builder is certain that those parts of jQuery are not being used. For example, an app that only used JSONP for $.ajax() and did not need to calculate offsets or positions of elements could exclude the offset and ajax/xhr modules.
You're always going to be slower fetching jquery-latest vs jquery-version--the server enforces it. For example:
http://code.jquery.com/jquery-latest.min.js
http://code.jquery.com/jquery-1.10.2.min.js
Note that there is now a very future dated Expires header sent. That means that once the first page is loaded, the browser is going to cache this version for a very long time making subsequent page calls have [almost] no latency.
By staying with the latest, however, you're forcing the browser to fetch this file for every page load. Of course that's going to add latency.
what I want is to have a way in which I know that the features are UP TO DATE and SUPPORTED (by jQuery) so later bug-fixes/improvements/changes/additions/cross-browser-support to jQuery are "automagically" implemented in my site.
Except when you write something that uses $.browser, .die() or .live then wonder why it's no longer working.
There's something to be said for spending the few minutes and updating your JS files (especially if it means your site worked yesterday and doesn't today and you don't know why).
You don't say so! jQuery's size is only 32KB!
http://code.jquery.com/jquery-latest.min.js
You will spent much more time loading multiple files than one. Furthermore, it will be a good idea to merge all you JS and CSS files into one JS and one CSS file.
I recently got into RequireJS and am integrating it into my backbone applications.
I noticed when looking at the source code that all individual javascripts are replaced by the bootstrap file, the line that reads:
<script data-main="js/main" src="js/require.js"></script>
And this line prevents me from viewing the attached files.
Does this mean that users are unable to hack their way into my external source code files if I load all scripts through the bootstrap file?
I am mostly concerned because I use a restful api route in my Backbone collections, and want to keep user data safe.
Thanks.
No, it doesn't mean that. It just means that scripts are loaded dynamically. Anybody can still download your JS files or look at them with any web debugging tool
I have a webpage to be hosted on a mobile device which is both Wi-Fi and 3G capable.
As 3G data may cost money and is generally limited, i want to minimize the amount of uploaded data by the device. So what I basically want to do is the following:
Try to load the jquery scripts online:
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.13/jquery-ui.min.js"></script>
And only if that fails to load correctly (e.g. if the user is not connected to the internet, just to the phone), load it from a local copy:
<script type="text/javascript" src="js/jquery-copy.js"></script>
The same applies for css files.
I've thought about having a <script id="loadable"></script> and then use $("#loadable").load("url"); but obviously I depend on jquery to be loaded first, which is the file to be minimized.
<script src="http://code.jquery.com/ui/1.8.13/jquery-ui.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/jquery-copy.js"%3E%3C/script%3E'))</script>
I edited the answer. I think bellow is the most elegant solution.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">window.jQuery || document.write('<script type="text/javascript" src="path/to/your/jquery"><\/script>')</script>
Best way to use Google's hosted jQuery, but fall back to my hosted library on Google fail
check out how they do it in HTML5 boilerplate.
If you take a look at the bottom of the index.html file within the GitHub repo, you'll see the following...
<script src="http://code.jquery.com/ui/1.8.13/jquery-ui.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/jquery-copy.js"%3E%3C/script%3E'))</script>
How does it work?
First, an attempt is made to grab the CDN version (Google's CDN url
is used above, but of course you could link to any source you like).
Immediately afterwards, we check for the jQuery global object.
If jQuery does not exist, the obvious assumption is that we didn't
manage to get the code from the CDN, so then we document.write a
script tag to get a copy from a local source instead.
I am confused about js file of jQuery which one i have downloaded just now.
downloaded a zipped folder contains a lot of folder and files inside it. How can i know which one js file exactly is for particular plugin?
Lets say, i have to downloaded for Dialog and i download from this page by selecting Model under Widget section. It downloads a zip folder and has many folder and files inside it.
When you've configured your download you just need to use the 2 folders: js and css.
You need to reference
jquery.js
jquery-ui-1.8.13.custom.min.js
jquery-ui-1.8.13.custom.css
I import this folder development-bundle\ui\i18n as well when I need the localized datetime-picker.
You have to look at the demos to see how they work and then go from there. This is like the Matrix. No one can tell you how jQuery UI works, you have to see if for yourself.
Also this is jQuery UI and not straight jQuery which is a single js file which you will find in the download.
Basically find out which stylesheets, js files you need, how to implement that (demos on the website will help with this) and then test it out on your own site.
As an alternative to download and host jQuery yourself, you can use googles cdn.
They serve a lot of different javascript frameworks, including jQuery and jQuery UI.
If you for example want to enable your site with jQuery all you structly have to do is include this in your html code:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
You can find the different js frameworks that they host on this page: http://code.google.com/intl/no/apis/libraries/devguide.html
The thing that you have downloaded is JQUERYUI. Its a UI customisation and enhancement library based on the Jquery library. But you have specified in the question as JQUERY library. This can be downloaded here: jquery.com
this post does a pretty nice job:
jquery from cdn
They include a failsafe incase the CDN doesn't load properly...here's the code excerpt from the post
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.5.1.min.js">\x3C/script>')</script>
this could be modified for various plugins too, like jqueryUI
(also referenced from http://html5boilerplate.com/ as noted in linked post)
Basically you have to include three things in the following order,
jquery API placed under js folder(something like jquery-1.5.1.min.js)
jquery UI library placed under js folder (something like jquery-ui-1.8.13.custom.min.js)
jquery ui css file placed under css\ui-lightness folder (something like jquery-ui-1.8.13.custom.css).
You can even refer the first two js files from any CDN.
I just checked my page size using firebug and all, and javascript files equal 478.2K!
<script src ="<%= Url.Content("/Scripts/MicrosoftAjax.js") %>"></script>
<script src ="<%= Url.Content("/Scripts/MicrosoftMvcAjax.js") %>"></script>
<script src ="<%= Url.Content("/Scripts/jquery-1.3.2.min.js") %>"></script>
<script src ="<%= Url.Content("/Scripts/jquery.form.js") %>"></script>
<script src ="<%= Url.Content("/Scripts/jquery.validate.js") %>"></script>
<script src ="<%= Url.Content("/Scripts/xVal.jquery.validate.js") %>"></script>
<script src ="<%= Url.Content("/Scripts/temp.js") %>"></script>
<script src ="<%= Url.Content("/Scripts/jquery-ui-1.8.5.custom.min.js") %>"></script>
<script src ="<%= Url.Content("/Scripts/jquery.ui.tabs.js") %>"></script
temp.js is my own file, and it has code of very few lines (like 10-20).
So what is going on? I mean how to fix this?
Start by getting rid of Microsoft*.js. If you use jquery you don't need those.
I would suggest that you use the minified versions of each js file and also that you combine them into one single js file (or as less as you can).
Here is an interesting article that may help you.
Except for temp.js (which you say is quite small), all the other files are third party libraries.
I assume you're using all those libraries on every page? If not, one thing you could do would be to only include them on pages where they're being used.
The file names suggest that some of them have been minimised. If the others haven't been, you could run them through a minimiser, or alternatively go back to their home pages to see if they supply a minimised version you could use.
Some of them may also provide an option on their site to only include functionality that you intend to use. JqueryUI does this for sure, though from the filename you're using it looks like you already made use of it for that, but check to see if any other libraries also offer that.
Check that you haven't got any overlapping functionality - you may be able to rationalise by removing redundant code. You would have to be very cautious if that means editing third party libraries (that's not usually a good idea), but you may find you've got entire libraries that are unnecessary, in which case it'd be a quick win to get rid of one of them.
If you want to off-load some of the scripts to a third party, Google hosts JQuery, JQueryUI and a lot of other plug ins, and they allow sites to load them from their servers. It wouldn't affect the size of the scripts that the user has to download, but would save your servers quite a lot of bandwidth.
At the end of the day though, you have got a lot of big scripts there, and they're providing a lot of functionality. If you need all that functionality, you'll have to put up with the weight of the code.
their are many thing you can do for this situation
use minified or production version instead of developer version
load them from CDN if you can do that.
If files not been changes from long time that you need TO use Cache.
their are many other thing you can do for application performance improvement.
You could try gzip compression so that the server compresses it and is uncompressed by the browser. That should help a bit.
Maybe something like this.
Or better still, in IIS itself like this.
considering that you're importing the jquery UI library, jquery, the microsoft ajax framework, some validation framework etc.. its not too bad..
You can try minify the files to save space. Here YUI Compressor
If you are using well-known and popular libraries (like jquery) you can use externally hosted files from a cdn (content delivery network), which are more than likely already in the browser cache (and therefore won't need to be downloaded again): google list of libs and jquery ref
Minify it :http://jscompress.com/
I would also suggest refactor it (rewrite it so there is less memory used).
Telerik Extensions For ASP.NET MVC
How about this approach?
MvcContrib: an Outer Curve Foundation project
MvcContrib.IncludeHandling is same approach.