jQuery Alternate Source in HTML

最新推荐文章于 2023-04-19 18:31:44 发布

原创最新推荐文章于 2023-04-19 18:31:44 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #script #alt #CDN #loading

文章详细介绍了如何利用CDN和备选源策略来提高jQuery库的加载稳定性，包括使用替代脚本元素、动态切换源等技巧，确保在主资源不可用时能够快速切换至备用资源，提升网站性能。

For better site performance, we may use popular libraries from CDN like Google Hosted Libraries.

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

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-2.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="'+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="'+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
未经允许，不准转载