For better site performance, we may use popular libraries from CDN like Google Hosted Libraries.
That's good. But sometimes, a storm may arise from a clear sky, the script may not be accessible. To save against a rainy day, an alternative source should be ready.
<script name="jQuery" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" data-alt-src="//code.jquery.com/jquery⑵.1.3.min.js"></script>and with the following snippet, got it.
<script title="script-alt 1.0">
if(!window.jQuery){
document.write('<script name="jQueryAlt" src="http://www.wfuyu.com/uploadfile/cj/20150502/'+document.scripts.namedItem("jQuery").getAttribute("data-alt-src")+'"><'+'/script>');
}
</script>Note that if you want to use jQuery API directly, use document.write() rather than appendChild call like document.body.appendChild() to add a script element to document. for the appendChild call, its related loading is asynchronous in Chrome.
To replace the error script element with alternative script element when jQuery loading failed, this works:
<script title="script-alt 1.1">
(function(){
if(!window.jQuery){
var script=document.scripts.namedItem("jQuery");
document.write('<script name="jQueryAlt" src="http://www.wfuyu.com/uploadfile/cj/20150502/'+script.getAttribute("data-alt-src")+'"><'+'/script>');
script.parentElement.replaceChild(document.scripts.namedItem("jQueryAlt"),script);
}
}());
</script>To let the alternative script element not be tagged with "jQueryAlt", one solution:
<script title="script-alt 1.2">
(function(){
if(!window.jQuery){
var script=document.scripts.namedItem("jQuery");
script.src=script.getAttribute("data-alt-src");
document.write(script.outerHTML);
var lastItem=function(){return this.item(this.length-1);};
script.parentElement.replaceChild(lastItem.call(document.scripts),script);
}
}());
</script>To make it modular, we got
<script title="script-alt 1.3">
(function(){
function lastItem(){
return this.item(this.length-1);
}
function setSrc(src){
this.src=src;
if(document.readyState=="complete"){this.outerHTML=this.outerHTML;return;}
document.write(script.outerHTML);
this.parentElement.replaceChild(lastItem.call(document.scripts),script);
}
if(!window.jQuery){
var script=document.scripts.namedItem("jQuery");
setSrc.call(script,script.getAttribute("data-alt-src"));
}
}());
</script>If you have your own host with SSL support, and its resources are located at the the same path as these in Google Hosted Libraries, then the only difference between your own host and Google Hosted Libraries is host. In these circumstances, you just need to specify an alternative source host.
<script name="jQuery" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" data-alt-host="ajax.myapis.com"></script>and with the following script, alternative source may work.
<script title="script-alt 2.0">
(function(){
function DocumentBasedURL(url){
var a=document.createElement("a");
a.href=url;
return a;
}
function lastItem(){
return this.item(this.length-1);
}
function setSrc(src){
this.src=src;
if(document.readyState=="complete"){this.outerHTML=this.outerHTML;return;}
document.write(script.outerHTML);
this.parentElement.replaceChild(lastItem.call(document.scripts),script);
}
if(!window.jQuery){
var script=document.scripts.namedItem("jQuery");
var url=new DocumentBasedURL(script.src);
url.host=script.getAttribute("data-alt-host");
setSrc.call(script,url.href);
}
}());
</script>Finally, jQuery API can be called to do what you want.
<script>
jQuery(function($){
console.log("jQuery "+$.fn.jquery+" loaded");
});
</script>本文来自http://blog.csdn.net/flashdelover/article/details/45421109
未经允许，不准转载
程序员人生，我编程，我富裕，记住wfuyu网，php教程，php学习，php手册，CMS模版制作
声明：本站大部分内容是作者原创，少部分收集于互联网供大家一起学习，原版权很多不明，如有侵权请联系本站，谢谢！
粤ICP备14040726号-1 2015-2020 程序员人生 版权所有
