华山资源网

jquery引入外部CDN 加载失败则引入本地jq库
网络编程 2024/11/18 佚名
3 1

由于第三方cdn库的盛行，很多朋友会选择使用第三方的类库，从学习上来说不建议大家都使用类库，这样我们失去了很多学习的机会，但使用上来说解决了很多代码兼容问题，这里都不多说了。

使用CDN加载jQuery类库一是可以省一点带宽，二是可以给用户带来更快的页面加载体验。

因为个人网站规模与cdn的带宽问题，现在cdn费用虽然下来了，但也有不给力的时候，很多朋友都会选择使用第三方的jquery库，个人推荐几个国内的 百度、新浪、bootcdn

下面的两段代码的作用 如果cdn的jquery没有加载进来，我们可以使用本地的类库。

jquery下载地址

第一种：推荐用法

<script src="/UploadFiles/2021-04-02/jquery.min.js">


上面，我们引用了百度 CDN的jQuery库，接着我们在脚本代码后添加了一个if语句来判断jQuery库是否加载成功，如果没有加载成功我们动态加载本地jQuery库。


其中，我们在document.write方法中直接使用了URL编码，把“<”编码为“%3C”，接着我们再使用unescape()方法把字符串还原过来。


我们通过unescape()方法把字符串转换回来，我们可以看到输出是一个正常的脚本引用代码。


现在，我们有一个疑问就是“为什么不使用常规字符，而是要使用字符编码呢？”，其实这是有原因的，这意味着我们代码将可以在XML、XHTML或HTML中正常运行，而无需把代码包含在CDATA中（具体请参考这里）。


第二种：





<script src="/UploadFiles/2021-04-02/jquery.min.js">


上面这种跟第一种原理是一样的，就是通过 || 运算符


表达式a || 表达式b : 计算表达式a（也可以是函数）的运算结果，


如果为 Fasle, 执行表达式b（或函数），并返回b的结果；


如果为 True，返回a的结果；


意思也是如果window.jQuery为false则加载本地的jquery库。


requireJs 引用cdn失败后加载本地js


问题：页面中引用js和css过多会导致页面加载变慢


                   引用cdn中的js和css会比直接在本地上传时间短


解决办法：我本地项目用到requireJs加载页面中的js和css，变为cdn加载时需要改动如下


1.jquery: ["https://cdn.bootcssddd.com/jquery/1.11.1/jquery.min","static/lib/jquery/jquery-1.9.1.min"],

2.增加build.js 代码如下





({
  baseUrl: "/js",
  paths: {
    "jquery": "empty:"
    
  },
  dir: "/js-build",
  optimize: "uglify",
  optimizeCss: "standard.keepLines",
  mainConfigFile: "config.js",//config.js为1中引用的文件
  removeCombined: true,
})





这篇文章就介绍到这了，后续小编会为大家分享更多的资料。
华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com