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="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" data-alt-src="http://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.vxbq.cn/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.vxbq.cn/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="http://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 程序員人生 版權所有
