jquery引入外部CDN 加载失败则引入本地jq库

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

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

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

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

jquery下载地址

第一种：推荐用法

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
 if (typeof jQuery == 'undefined') {
 document.write(unescape("%3Cscript src='/skin/mobile/js/jquery.min.js' type='text/javascript'%3E%3C/script%3E"));
 }
</script>

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

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

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

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

第二种：

<script src="http://lib.sinaapp.com/js/jquery11/1.8/jquery.min.js"></script>
<script>window.jQuery || document.write(unescape("%3Cscript src='/skin/mobile/js/jquery.min.js' type='text/javascript'%3E%3C/script%3E"))</script>

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

表达式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,
})

这篇文章就介绍到这了，后续我们小编会为大家分享更多的资料。

赞 (0)

相关推荐

  • JS文件中加载jquery.js的实例代码

    JS文件中加载jquery.js的实例代码

    本文表述了JS文件中加载jquery.js的方法,具有很好的参考价值,希望对大家有所帮助. 最近有一个需求: 1.在一个html中只能引入一个JS文件 不能有JS代码和其他JS文件的引入: 2.这个JS文件中 还要引入其他的JS文件: 3.所有JS功能都写在这个JS文件中 这些代码用到了jquery相关的东东 所以这里第一个需要解决的就是怎么引入jquery.js. 在网上搜索了很多方法都不太实用,由于我自己离开WEB多年 最后向朋友询问得到以下代码: 1.js // by firefoxmmx

  • 菊花转动的jquery加载动画效果

    菊花转动的jquery加载动画效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link charset="utf-8" href="css/reset.css" rel="external nofollow" rel="style

  • jQuery+datatables插件实现ajax加载数据与增删改查功能示例

    本文实例讲述了jQuery+datatables插件实现ajax加载数据与增删改查功能.分享给大家供大家参考,具体如下: 这里给大家分享一下我在项目中用datatables实现ajax加载数据与增删改查 注意,需要引入jquery.datatables.layer html代码: <div class="thead"> <input placeholder="请输入搜索内容" id="searchTitle" type=&quo

  • jquery 实现拖动文件上传加载进度条功能

    通过对文件的拖动实现文件的上传,主要用到的是HTML5的ondrop事件,上传内容通道FormData传输: //进度条 <div class="parent-dlg" > <div class="progress-label">0%</div> <div class="son"></div> </div> //要拖动到的地方 <div class="main

  • jQuery实现动态加载select下拉列表项功能示例

    本文实例讲述了jQuery实现动态加载select下拉列表项功能.分享给大家供大家参考,具体如下: 需求说明: 以前使用的select下拉列表都是静态的,select 的option数据都是写死的.现在项目中的select需要根据不同的场景使用不同的数据,解决方式就是动态加载option数据. 代码部分: 下面步骤介绍了如何从数据库获取数据,并动态的在前端显示. 步骤一:jsp页面静态的select: <div> <select id="selectSM"> &

  • jQuery实现滚动到底部时自动加载更多的方法示例

    本文实例讲述了jQuery实现滚动到底部时自动加载更多的方法.分享给大家供大家参考,具体如下: 这里利用AJAX,实现滚动到底加载数据功能: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/

  • JQuery Ajax动态加载Table数据的实例讲解

    我们在jsp定义一个select和一个table,要求实现根据select的选值,动态加载table数据. <select id="type" name="type" onchange="reloadTable(this)"></select> <table id="import-table" class="table table-striped table-bordered table

  • jquery ajax加载数据前台渲染方式 不用for遍历的方法

    如下所示: var provinces = res.res; var html = []; var option_select='<option value="" >请选择</option>'; var tpl = '<option value="{1}" data-id="{1}" data-name="{0}">{0}</option>'; html.push(option_

  • jquery引入外部CDN 加载失败则引入本地jq库

    由于第三方cdn库的盛行,很多朋友会选择使用第三方的类库,从学习上来说不建议大家都使用类库,这样我们失去了很多学习的机会,但使用上来说解决了很多代码兼容问题,这里都不多说了. 使用CDN加载jQuery类库一是可以省一点带宽,二是可以给用户带来更快的页面加载体验. 因为个人网站规模与cdn的带宽问题,现在cdn费用虽然下来了,但也有不给力的时候,很多朋友都会选择使用第三方的jquery库,个人推荐几个国内的 百度.新浪.bootcdn 下面的两段代码的作用 如果cdn的jquery没有加载进来,

  • jQuery处理图片加载失败的常用方法

    本文实例讲述了jQuery处理图片加载失败的常用方法.分享给大家供大家参考.具体如下: 这里演示用 jQuery 替换源来提醒用户加载失败及隐藏的方法. // 方法 1:更换图片地址 $('img').error(function(){ $(this).attr('src', '加载失败.png'); }); // 方法 2:隐藏它 $("img").error(function(){ $(this).hide(); }); 希望本文所述对大家的jQuery程序设计有所帮助.

  • jQuery图片加载失败替换默认图片方法汇总

    本文主要讨论页面中图片加载失败后替换默认图片的几种方式 重点来了:一定要记住error事件不冒泡. 相关的知识点:jquery的ready方法.$("img").error().img的complete属性.插件imagesLoaded.事件委托.事件捕获和图片预加载的方法等 1. 图片加载失败替换为默认图片 1.1 给图片绑定error事件 当图片加载失败时会触发error事件 $("img").on("error", function ()

  • Asp.net利用JQuery弹出层加载数据代码

    Asp.net利用JQuery弹出层加载数据代码

    首先我们新建一个网站,在网站里面新增一般处理程序,命名为ReadData.ashx.然后在里面输入如下代码: 复制代码 代码如下: using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Services; using System.Data.SqlClient; //引入命名空间 using System.Data; namespace 加载层 {

  • 如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)

    如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)

    ECharts地图主要用于地理区域数据的可视化,展示不同区域的数据分布信息.ECharts官网提供了中国地图.世界地图等地图数据下载,通过js引入或异步加载json文件的形式调用地图. 效果演示      源码下载 本文将结合实例讲解如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据,我们以中国地图为例,展示去年(2015年)我国各省份GDP数据.通过异步请求php,读取mysql中的数据,然后展示在地图上,因此本文除了你掌握前端知识外,还需要你了解PHP以及MySQL方

  • JavaScript判断图片是否能够加载,失败则替换默认图片

    一为使网站整洁,二来提升网页体验,不至于让别人觉得你这网站有问题.其实实现起来也是非常简单的,具体请看看代码. 图片加载失败时用默认图片替代 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • js针对图片加载失败的处理方法分析

    本文实例讲述了js针对图片加载失败的处理方法.分享给大家供大家参考,具体如下: 在项目中不可避免会用到图片,尤其是列表,有时候图片会加载失败:这样就会显示一个很难看的坏图片缩略图:下面介绍两种方法,解决这个问题: 1.如果在你的项目中有引入jQuery插件,你可以使用error([[data],fn])这个函数: $("img").error(function(){ //当图片加载失败时,你要进行的操作 //$(this).attr('src','images/no_pic.jpg')

  • Vue如何使用cdn加载资源加快打包速度

    Vue如何使用cdn加载资源加快打包速度

    目录 为什么使用CDN 解决方法 使用CDN主要解决两个问题 具体步骤 资源引入 打包对比 附:vue项目常用的cdn地址 总结 为什么使用CDN Vue项目打包的时候,默认会把所有代码合并生产新文件,其中包括各种库导致打包出来很大.如果使用cdn的话,会更利于程序的加载速度. 在Vue项目中,引入到工程中的所有js.css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏.若是引入的库众多,那么vendor.js文件体积将会相当的大,影响首开的体验. 解决方法

  • jQuery Ajax页面局部加载方法汇总

    在jquery中实现ajax加载的方法有很多种,不像以前的js的ajax只有那一种,下面我们介绍jquery ajax实现局部加载方法总结,有需要了解的朋友可参考. 例 $.ajax({ url: "hotelQuery!queryHotelByCity.action", type: "post", dataType: "html", data: "queryHotel.city="+cityobj.value+"&

  • HTML5+JS+JQuery+ECharts实现异步加载问题

    这几天,看了一下ECharts官网的API和Demo发现很有意思,于是就利用模型预测产生的数据做一个伪实时的动态数据显示 . 首先,创建一个index.html的文件,我用的vscode打开的,进行编写. 1.插入一个标签 <div id="main" style="width:600px;height:400px;"></div> 设置他的一些style(可自行美化,我很懒!!!). 2.在body下建一个<script>脚本(

随机推荐