幾個簡單的加載中動畫吧。

像前面三種都是相當于幾個不同的點輪流來播放同一動畫：變大變小。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>