zoukankan      html  css  js  c++  java
  • 加载jquery插件注意了

    1、尽量放在</body>之前,不要放在</head>标签之前,如果执意要放也要放在css之后,例如:

    <link href="style.css" .../>
    <script src=jquery.js></script>
    

    2、加载方式使用异步加载,异步加载并不是以下的这种

    <script type="text/javascript" src="jquery.js"></script>
    

     而是这样的异步加载方式

    (function(doc){
      var j =doc.createElement("script");
      j.type = "text/javascript";  j.async = true;  j.src = "jquery.js";
      var s = doc.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(j, s);
    })(document);
    

    3、在这里推荐一些jquer cdn加速

    目前用的比较普遍的是Google提供的jquery库:

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

    当然,百度在国内的访问速度是不可小视的:

    <script type="text/javascript" src="//libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>

    新浪的CDN同样速度飞快:

    <script type="text/javascript" src="//lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>

    不跟风,你也可以选择微软的jquery CDN:

    <script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>

    你可以直接更改上面出现的版本号来选择不同的版本。哪一个最快呢?如何选择呢?

    如果你的网站访客来自海外的不少,建议选用Google,如果主要访客是国内,选择百度也没问题。但是百度在海外的访问速度可不及Google。

    而且因为大多数的网站选择了Google的CDN,由于缓存原理,来访你的网站,可能google的CDN更快。

    如果你不是确定自己的网站下载速度飞快,我建议最好选用上述的公开CDN来节省加载时间,同时也节省了流量。

    4、如果你觉得jquery比较大的话可以使用zepto.js 其大小只有10k,最大兼容jquery API。

    5、说了那么多,加载jquery的正确方式是什么?

    首先选好哪个CDN,或者你自己的网站托管js文件,并确定调用的位置在头部还是body,下面以Google的jquery库为例,普通的加载方式是

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

    然而Google的服务在国内间歇性中断,所以我可以照顾一下国内访客,这么写:

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

    <script type="text/javascript">

    window.jQuery || document.write(unescape('%3Cscript%20type%3D%22text/javascript%22%20src%3D%22//libs.baidu.com/jquery/2.0.3/jquery.min.js%22%3E%3C/script%3E'));

    </script>

    这样子即可实现如果jquery未能加载成功,则自动加载百度的jquery库,做到万无一失了。

  • 相关阅读:
    第17章—前端分页(Bootstrap-Table)
    第16章—日志(slf4j&logback)
    第15章—数据库连接池(DBCP2)
    第14章—数据库连接池(C3P0)
    第13章—数据库连接池(Druid)
    第00章—IDEA
    第12章—整合Redis
    第11章—常用注解(持续更新中)
    获取图片的宽高
    button按钮文字超出范围后省略号位置设置
  • 原文地址:https://www.cnblogs.com/junhey/p/4242986.html
Copyright © 2011-2022 走看看