Speeding up Concrete5 with Fallback for CDN Hosted jQuery...
Permalink
Ran across this bit of code which allows one to load jQuery from a CDN, but if it's down/there's no internet, it loads a local file.
From:http://css-tricks.com/snippets/jquery/fallback-for-cdn-hosted-jquer...
In the spirit of speeding up 5.4.1, could this be used?
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> if (typeof jQuery == 'undefined') { document.write(unescape("%3Cscript src='/js/jquery-1.4.2.min.js' type='text/javascript'%3E%3C/script%3E")); } </script>
From:http://css-tricks.com/snippets/jquery/fallback-for-cdn-hosted-jquer...
In the spirit of speeding up 5.4.1, could this be used?
LOVE this idea... Let's get rid of some of that bloat, guys!
there is an addon in the MP that does that :) i believe its $15, and it doesn't break any addons
Not to step on JShannon's toes, but if this method works with and without internet and makes everything load faster, why not include it in the core?
I respectfully disagree with this assessment. I've seen just as many people say that using a CDN for this causes unforseen problems as I have seen people say it speeds things up. For example, see the comments in this recent hacker news thread:http://news.ycombinator.com/item?id=1713685...
I think making the information available about how to do this yourself is a great idea (and perhaps could be an official "How-To" in the documentation), but if it were included in the core system, it might cause a lot of confusion to people who are not experienced web developers as to why things are working strangely when issues do occur.
Just my 2 cents.
-Jordan
I think making the information available about how to do this yourself is a great idea (and perhaps could be an official "How-To" in the documentation), but if it were included in the core system, it might cause a lot of confusion to people who are not experienced web developers as to why things are working strangely when issues do occur.
Just my 2 cents.
-Jordan
Personally I would like site wide configuration settings for where to source jQuery and jQueryUI, and what version to load (maybe with a local source default). That way, any site can be tuned to use whichever source and version best suits it. It doesn't have to be complicated, just a text field that (if blank) defaults to local, else enter the full URL.
I suspect that in the future CDN sourcing will become more widespread for other js and css frameworks, so maybe think big and extend it to a general setting mechanism.
Going back to the original point of loading from a CDN with a local fallback, whilst if implemented well it would preserve functionality, I have my suspicions as to whether this would be worthwhile with the inevitable delays while waiting for a CDN resource to fail to load.
I suspect that in the future CDN sourcing will become more widespread for other js and css frameworks, so maybe think big and extend it to a general setting mechanism.
Going back to the original point of loading from a CDN with a local fallback, whilst if implemented well it would preserve functionality, I have my suspicions as to whether this would be worthwhile with the inevitable delays while waiting for a CDN resource to fail to load.
I think this is a great idea -- default to the way it works now but allow CDN override via a dashboard.
Thinking about it more, it could also be used for the jQueryUI theme.
Just change header_required.php, something like this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
<?php $this->addHeaderItem($html->javascript('jquery.js'), 'CORE'); ?>
</script>
pvernaglia,
I tried changing this:
...to this, based off the code you wrote:
Obviously with the rest of header_required.php closing that last php tag (?>) later in the document.
Anyway, when I did this, jQuery was loaded twice every time. What am I doing wrong here?
I tried changing this:
$this->addHeaderItem($html->css(‘ccm.base.css’), ‘CORE’); $this->addHeaderItem($html->javascript(‘jquery.js’), ‘CORE’); $this->addHeaderItem($html->javascript(‘ccm.base.js’), ‘CORE’);
...to this, based off the code you wrote:
$this->addHeaderItem($html->css('ccm.base.css'), 'CORE'); ?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
<?php $this->addHeaderItem($html->javascript('jquery.js'), 'CORE'); ?>
</script>
<?php
$this->addHeaderItem($html->javascript('ccm.base.js'), 'CORE');Obviously with the rest of header_required.php closing that last php tag (?>) later in the document.
Anyway, when I did this, jQuery was loaded twice every time. What am I doing wrong here?
To prevent C5 from loading jQuery twice you have to use this code:
This method is used in the HTML5 Boilerplate (http://html5boilerplate.com/).
The difference is, that the script tag is only added to the document if the CDN loading failed.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script>window.jQuery || document.write("<script src='<?= $html->javascript('jquery.js')->file ?>'>\x3C/script>")</script>This method is used in the HTML5 Boilerplate (http://html5boilerplate.com/).
The difference is, that the script tag is only added to the document if the CDN loading failed.
