Loading jquery once across all pages

Question

Is there a method that allows me to load jQuery only one time across multiple pages? I am loading external pages inside a div.

$("#home").click(function(e) {
   e.preventDefault();$("#content").html(ajax_load).l‌oad("page.html"); 
});

The pages I am loading require Jquery. Instead of calling jQuery eg: (<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">) on each of these external pages can I call the already loaded version or do I have to call Jquery again and again?

I ask this because am I not repeating the constant loading of jquery libary on each external page and does this not slow down the load of the external pages?

"I am loading external pages inside a div." What code do you use to do this? — j08691, Jul 10 '13 at 18:19
You Can try browser caching This might help You http://stackoverflow.com/questions/311062/caching-javascript-files — tousif, Jul 10 '13 at 18:23
If you're really loading from google CDN, then you're already cached, so no re-download of jquery will happen. — gustavohenke, Jul 10 '13 at 18:30
@gustavohenke In this case should I still load it in the html? — User_coder, Jul 10 '13 at 18:32
jquery must be included only once in your page. So, be sure that your AJAX included HTML doesn't include it, or you'll have problems. — gustavohenke, Jul 10 '13 at 18:44

braican · Accepted Answer · 2013-07-10T18:35:15.683

If you are loading the external pages via ajax into a page with jquery, then you only need to load jquery on that containing page. So I suppose the answer is yes, you can reference the already loaded version of jquery.

Just be sure to include the selector parameter in any event listeners (such as .on()) to delegate the event since the content you are adding is dynamically added and not directly bound. http://api.jquery.com/on/#direct-and-delegated-events

If you have jquery loaded in the external pages that are getting ajaxed in, the main page will then have two different jquery libraries loaded, which is not what you want as it can cause all types of issues.

score 0 · Answer 2 · answered Jul 10 '13 at 18:27

This will load the entire page inside #content. If there are no other scripts needed, eg. others .js files, from the external page you can wrap everything in your body tag in a div and do the following:

$("#content").html(ajax_load).load("page.html#wrapper");

This will load only what is in #wrapper.

I can't remember why, but I know that you can't just use the body tag as a selector for this.

Note: the div does not have to be called wrapper.

Hope this helps!

Loading jquery once across all pages

2 Answers2