HTML的延遲加載屬性defer的使用技巧

. 介紹

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

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

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

第三個動畫就需要將小球的位置定位一下，讓幾個小球整體上看起來圍成一個圓，然后就像第一個一樣使小球變大變?。?/p>

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

一篇文章Stimulus 狀態管理，幻燈片顯示講述了Stimulus的狀態管理，接下來我們看看如何跟蹤外部資源的狀態。

有時候我們的controllers需要跟蹤外部的資源的狀態，這里的外部指的是不在DOM或不在Stimulus中的任何東西。例如，我們可能需要發出HTTP請求，并在請求狀態變化時進行響應?；蛘呶覀兿Ｍ麊右粋€定時器，然后當controller斷開連接時停止定時器。在本文，我們將解決這些問題。

接下來，我們學習一下，如何通過加載和插入遠程HTML片段，來異步填充頁面的各個部分。

我們要創建一個通用的用于加載內容的controller，所有的HTML內容都是從服務器獲取的。然后我們將用它來加載一系列未讀的消息，就像你在郵箱里看到的那樣。

打開public/index.html：

<div data-controller="content-loader"
    data-content-loader-url-value="/messages.html"></div>

然后創建一個public/messages.html

<ol>
    <li>New Message: Stimulus Launch Party</li>
    <li>Overdue: Finish Stimulus 1.0</li>
</ol>

在真實應用中，這個內容是服務器動態生成的，但是這里出于示范的目的，我們就用一個靜態文件。

現在我們實現一下我們的controller：

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
    static values = { url: String }

    connect() {
        this.load()
    }

    load() {
        fetch(this.urlValue)
            .then(response => response.text())
            .then(html => this.element.innerHTML = html)
    }
}

當controller連接元素時，會根據data-content-loader-url-value屬性值設置的url，發起請求。然后把請求得到的HTML內容，賦值給連接元素的innerHTML。

打開瀏覽器的開發者工具，點開網絡查看tab頁，然后刷新頁面。您將看到一個表示初始頁面加載的請求，隨后是controller對messages.html的后續請求。

我們繼續優化一下controller，隔段時間就刷新div內的內容，讓它一直顯示最新的內容。

我們使用data-content-loader-refresh-interval-value屬性值來設定刷新的時間間隔，單位是毫秒，

<div data-controller="content-loader"
    data-content-loader-url-value="/messages.html"
    data-content-loader-refresh-interval-value="5000"></div>

現在我們修改一下controller，檢查間隔，如果間隔值存在，就啟動一個定時器來刷新。

在controller里添加一個static values，然后定義一個新方法startRefreshing():

export default class extends Controller {
    static values = { url: String, refreshInterval: Number }
    
    startRefreshing() {
        setInterval(() => {
            this.load()
        }, this.refreshIntervalValue)
    }

    // …
}

然后修改connect()方法，如果refreshInterval值存在的話，就調用startRefreshing()方法。

connect() {
    this.load()

    if (this.hasRefreshIntervalValue) {
        this.startRefreshing()
    }
}

刷新頁面，然后通過開發者工具，觀察一下，是不是每5秒鐘就會有一個新請求。然后可以嘗試修改public/messages.html，所有的改變都會出現在div內。

當controller連接元素時，我們啟動了定時器，但是我們沒有停止它。這意味著，如果我們的controller連接的元素消失的話，controller將在后臺繼續發起HTTP請求。

我們修復這個問題，修改startRefreshing()方法，保存一個對定時器的引用：

startRefreshing() {
    this.refreshTimer = setInterval(() => {
        this.load()
    }, this.refreshIntervalValue)
}

然后添加一個對應的stopRefreshing()方法，來取消定時器：

stopRefreshing() {
    if (this.refreshTimer) {
        clearInterval(this.refreshTimer)
    }
}

最終，我們告訴Stimulus當controller失去連接時，取消定時器，好，我們添加一個disconnect()方法：

disconnect() {
    this.stopRefreshing()
}

現在我們可以確定，內容加載器controller只會在連接到DOM時才會發出請求。

我們來看一下最終的controller類：

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
    static values = { url: String, refreshInterval: Number }

    connect() {
        this.load()

        if (this.hasRefreshIntervalValue) {
            this.startRefreshing()
        }
    }

    disconnect() {
        this.stopRefreshing()
    }

    load() {
        fetch(this.urlValue)
            .then(response => response.text())
            .then(html => this.element.innerHTML = html)
    }

    startRefreshing() {
        this.refreshTimer = setInterval(() => {
            this.load()
        }, this.refreshIntervalValue)
    }

    stopRefreshing() {
        if (this.refreshTimer) {
            clearInterval(this.refreshTimer)
        }
    }
}

本文介紹了如何使用Stimulus生命周期回調來獲取和釋放外部資源。

在線咨詢

上一篇：CSS 中幾種最常用的水平垂直居中的方法
下一篇：前端性能優化(二)-瀏覽器緩存機制

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML的延遲加載屬性defer的使用技巧

. 介紹

2. 正常模式

3. 延遲模式

4. 正確延遲模式

5. 總結

您的項目需求