7

I have been using the following code for loading JQuery in all of my projects. I grabbed it from http://html5boilerplate.com/. There is extensive disussion of this technique here.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="jquery-1.7.1.min.js"><\/script>');</script>

This code works great and seems pretty darn quick once I've put it up on the interwebs, but when I open my .html file locally it takes ~10 seconds per refresh. Generally I get fed up and alter the code as follows:

<!-- uncomment when going live 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="jquery-1.7.1.min.js"><\/script>');</script>-->

<!-- remove following line when going live -->
<script src="jquery-1.7.1.min.js"></script>

Am I missing something obvious here? I feel like I should not be getting the super-slow loading times, but it does resolve itself when comment out those lines.

Community
  • 1
  • 1
Zach Lysobey
  • 14,959
  • 20
  • 95
  • 149

2 Answers2

11

I'm guessing that you're not serving the HTML through a web server.

The // prefix on the url indicates that it should use the same protocol as the current resource (usually either http or https)

Since you're not serving through http and instead through a file, it's trying to look for it on your local file system, eventually timing out.

The network tab on Chrome inspector shows it trying to load the following for me:

file://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
file:///C:/Users/[My Username]/Documents/jquery-1.7.1.min.js

It'll try to load those times and the file system (or maybe the browser) will eventually timeout.

The proper way is to serve it through a web server, either IIS if you're on Windows or Apache if you're on Linux/Mac (Apache also works in Windows, but IIS has better UI tools)

Davy8
  • 30,868
  • 25
  • 115
  • 173
  • I suppose running it through XAMPP is the solution I'm looking for, I'd try it out now, but the darn thing broke somehow ;-) gotta give it a reinstall when I get a chance. – Zach Lysobey Jan 03 '12 at 21:22
  • @ZachL. if you serve the file through a web server instead of just opening the file, it should work. – Davy8 Jan 03 '12 at 21:23
  • 1
    For the record, I'm kinda bummed with this solution though. For small html/js/css projects I like to work right off the desktop. – Zach Lysobey Jan 03 '12 at 21:25
1

This line:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Attempts to find jQuery in your file system, which means it will take a while to fail. While looking at the Network tab of the developer panel in Google Chrome, it attempts to look for the file in file://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js.Then, once it has failed to find the file, it loads jQuery (and successfully finds the file) using the next line:

<script>window.jQuery || document.write('<script src="jquery-1.7.1.min.js"><\/script>');

To remedy the problem, add https: to the src of your script tag, like so:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Ivan
  • 10,052
  • 12
  • 47
  • 78