几个简单的加载中动画吧。

像前面三种都是相当于几个不同的点轮流来播放同一动画：变大变小。css3里面有一个用于尺度变换的方法：scale(x,y)：定义 2D 缩放转换，改变元素的宽度和高度。

第四种就是一个小球从上往下跌落，再弹回去，在上面的时候速度最小，下面的时候速度最大。由于该小球只进行了上下的移动，所以我们可以运用：translateY(n)：定义 2D 转换，沿着 Y 轴移动元素，从而实现小球沿Y方向来回移动。

废话不多说了，上代码。

首先，第一个加载中的动画：

html Code

<div id="loading1">
         <div class="demo1"></div>
         <div class="demo1"></div>
         <div class="demo1"></div>
         <div class="demo1"></div>
         <div class="demo1"></div>
 </div>

css Code

.demo1 {
     width: 4px;
     height: 4px;
     border-radius: 2px;
     background: #68b2ce;
     float: left;
     margin: 0 3px;
     animation: demo1 linear 1s infinite;
     -webkit-animation: demo1 linear 1s infinite;
 }
 .demo1:nth-child(1){
     animation-delay:0s;
 }
 .demo1:nth-child(2){
     animation-delay:0.15s;
 }
 .demo1:nth-child(3){
     animation-delay:0.3s;
 }
 .demo1:nth-child(4){
     animation-delay:0.45s;
 }
 .demo1:nth-child(5){
     animation-delay:0.6s;
 }
 @keyframes demo1 
 {
     0%,60%,100% {transform: scale(1);}
     30% {transform: scale(2.5);}
 }
 @-webkit-keyframes demo1 
 {
     0%,60%,100% {transform: scale(1);}
     30% {transform: scale(2.5);}
 }

css Code

第二个动画和第一个动画大同小异，第一个动画是将小球整体变大变小，第二动画则是将小方块的高度变大变小，而宽度不变：

html Code

 <div id="loading2">
     <div class="demo2"></div>
     <div class="demo2"></div>
     <div class="demo2"></div>
     <div class="demo2"></div>
     <div class="demo2"></div>
 </div>

css Code

.demo2 {
     width: 4px;
     height: 6px;
     background: #68b2ce;
     float: left;
     margin: 0 3px;
     animation: demo2 linear 1s infinite;
     -webkit-animation: demo2 linear 1s infinite;
 }
 .demo2:nth-child(1){
     animation-delay:0s;
 }
 .demo2:nth-child(2){
     animation-delay:0.15s;
 }
 .demo2:nth-child(3){
     animation-delay:0.3s;
 }
 .demo2:nth-child(4){
     animation-delay:0.45s;
 }
 .demo2:nth-child(5){
     animation-delay:0.6s;
 }
 @keyframes demo2 
 {
     0%,60%,100% {transform: scale(1);}
     30% {transform: scaleY(3);}
 }
 @-webkit-keyframes demo2 
 {
     0%,60%,100% {transform: scale(1);}
     30% {transform: scaleY(3);}
 }

css Code

第三个动画就需要将小球的位置定位一下，让几个小球整体上看起来围成一个圆，然后就像第一个一样使小球变大变小：

html Code

 <div id="loading1">
         <div class="demo1"></div>
         <div class="demo1"></div>
         <div class="demo1"></div>
         <div class="demo1"></div>
         <div class="demo1"></div>
 </div>

css Code

#loading3 {
     position: relative;
     width: 50px;
     height: 50px;
 }
 .demo3 {
     width: 4px;
     height: 4px;
     border-radius: 2px;
     background: #68b2ce;
     position: absolute;
     animation: demo3 linear 0.8s infinite;
     -webkit-animation: demo3 linear 0.8s infinite;
 }
 .demo3:nth-child(1){
     left: 24px;
     top: 2px;
     animation-delay:0s;
 }
 .demo3:nth-child(2){
     left: 40px;
     top: 8px;
     animation-delay:0.1s;
 }
 .demo3:nth-child(3){
     left: 47px;
     top: 24px;
     animation-delay:0.1s;
 }
 .demo3:nth-child(4){
     left: 40px;
     top: 40px;
     animation-delay:0.2s;
 }
 .demo3:nth-child(5){
     left: 24px;
     top: 47px;
     animation-delay:0.4s;
 }
 .demo3:nth-child(6){
     left: 8px;
     top: 40px;
     animation-delay:0.5s;
 }
 .demo3:nth-child(7){
     left: 2px;
     top: 24px;
     animation-delay:0.6s;
 }
 .demo3:nth-child(8){
     left: 8px;
     top: 8px;
     animation-delay:0.7s;
 }
 
 @keyframes demo3 
 {
     0%,40%,100% {transform: scale(1);}
     20% {transform: scale(3);}
 }
 @-webkit-keyframes demo3 
 {
     0%,40%,100% {transform: scale(1);}
     20% {transform: scale(3);}
 }

接下来是第四个动画：

1 <div id="loading5">
2      <div class="demo5"></div>
3 </div>

 #loading5 {
     width: 20px;
     height: 100px;
     border-bottom: 1px solid #68b2ce;
 }
 .demo5 {
     width: 20px;
     height: 20px;
     border-radius: 10px;
     background: #68b2ce;
     animation: demo5 cubic-bezier(0.5,0.01,0.9,1) 0.6s infinite alternate;
     -webkit-animation: demo5 cubic-bezier(0.5,0.01,0.9,1) 0.6s infinite alternate;
 }
 @keyframes demo5
 {
     0%{
         transform:translateY(0px);
         -webkit-transform:translateY(0px);
     }
     100% {
         transform:translateY(80px);
         -webkit-transform:translateY(80px);
     }
 }
 @-webkit-keyframes demo5
 {
     0%{
         transform:translateY(0px);
         -webkit-transform:translateY(0px);
     }
     100% {
         transform:translateY(80px);
         -webkit-transform:translateY(80px);
     }
 }

css Code

以上就是这几个简单的加载中小动画的内容了。

转载 https://www.cnblogs.com/tangchan/p/7604594.html

. 介绍

1.1 介绍

福哥最近处理一个客户的网站JS错误发现了一个诡异的情况，就是前面载入了一个JQ的插件，后面调用这个插件，提示插件不是一个函数。

经过一顿查询，发现载入插件的地方有个“defer”属性，查资料得知这个属性告知浏览器在全部网页都加载完成之后再加载这个插件代码。

我去，全部加载完成之后再加载插件代码，那么这里调用插件肯定失败啊~~

2. 正常模式

正常模式下，先加载jquery库，后打印版本信息，一切顺利~~

2.1 代码

<script type="text/javascript" src="http://sample.com/js/jquery.js"></script>
<script>
    console.log(jQuery.fn.jquery);
</script>

2.2 效果

3. 延迟模式

3.1 代码

现在给加载jquery库使用延迟模式，再来打印版本信息，报错了。

因为打印版本信息的时候jquery库还没有加载，当然是找不到了。

<script type="text/javascript" src="http://sample.com/js/jquery.js" defer></script>
<script>
    console.log(jQuery.fn.jquery);
</script>

3.2 效果

4. 正确延迟模式

要解决这个问题，需要将代码放入页面加载完成后的位置执行，这里使用的是onreadystatechange事件判断的页面加载状态（因为jQuery被延迟了，只能用原生JS了）。

4.1 代码

<script type="text/javascript" src="http://sample.com/js/jquery.js" defer></script>
<script>
    document.onreadystatechange = function () {
        if(this.readyState == "complete"){
            console.log(jQuery.fn.jquery);
        }
    };
</script>

5. 总结

福哥今天给大家讲解了关于HTML的延迟加载属性defer的相关知识，使用延迟加载可以“提高页面加载速度”，让用户直观上感觉页面速度比较快！但是，如果使用不当就会造成JS代码错误的问题。

https://m.tongfu.net/home/35/blog/512979.html

 <div id="loading5">
 <div class="demo5"></div>
 </div>