使用loader.js組件實(shí)現(xiàn)進(jìn)度條加載效果

發(fā)布時(shí)間：2020-06-02 14:48:13 來源：億速云閱讀：265 作者：Leah 欄目：web開發(fā)

這篇文章給大家分享的是有關(guān)使用loader.js組件實(shí)現(xiàn)進(jìn)度條加載效果的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過來看看吧。

效果圖：

這個(gè)倒是比較簡單，兩個(gè)div即可，bootstrap官方就提供有多種主題的進(jìn)度條組件。如果自己要用，參照下別人的代碼，寫成自己的風(fēng)格即可，實(shí)際上也非常的好理解：

.progress {
    height: 20px;
    background-color: #f5f5f5;
    border-radius: 4px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);}.progress-bar {
    float: left;
    width: 0;
    height: 100%;
    font-size: 12px;
    line-height: 20px;
    color: #fff;
    text-align: center;
    background-color: #337ab7;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    position: relative;
    border-radius: 4px;}

第二步，就是該考慮下如何來計(jì)算進(jìn)度。以資源加載為例，如果是客戶端，通常我們是有權(quán)限去讀取資源實(shí)際大小的，所以在計(jì)算加載進(jìn)度的時(shí)候，只要拿已加載的數(shù)據(jù)量除以要加載的總的數(shù)據(jù)量即可；但是在網(wǎng)頁端，我們沒有這個(gè)能力去拿到要加載的資源的大小，所以只能采用一個(gè)不那么準(zhǔn)確的方案，用已加載的資源個(gè)數(shù)除以總的資源個(gè)數(shù)?；诤竺娴挠?jì)算方法，我們只需要在每個(gè)耗時(shí)任務(wù)完成的時(shí)刻，計(jì)算好已完成的任務(wù)進(jìn)度，然后給進(jìn)度條設(shè)置相應(yīng)的寬度即可。

下面我用定時(shí)器模擬了4個(gè)同時(shí)發(fā)起，但是需要不同時(shí)間才能完成的異步任務(wù)來實(shí)現(xiàn)這一步的功能：

<!doctype html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href="loader.css" rel="stylesheet"></head><body><div id="loader" class="loader">
    <div class="progress">
        <div class="progress-bar progress-bar-striped">
            <div class="progress-value"></div>
        </div>
    </div></div></body><script src="jquery.js"></script><script>
    var $bar = $('#loader').find('.progress-bar');    var $value = $bar.find('.progress-value');    var Task = function (index, duration) {
        setTimeout(function () {
            var p = (index / 4 * 100).toFixed(0) + '%';
            $bar.css('width',p);
            $value.text(p);
            console.log('第' + index + '個(gè)異步任務(wù)執(zhí)行完畢');
        }, duration);
    };    //模擬四個(gè)同時(shí)發(fā)起的異步任務(wù)
    var task1 = new Task(1, 1000);    var task2 = new Task(2, 3000);    var task3 = new Task(3, 5000);    var task4 = new Task(4, 7000);</script></html>

實(shí)際效果如下：

使用loader.js組件實(shí)現(xiàn)進(jìn)度條加載效果

當(dāng)?shù)竭@一步的時(shí)候，其實(shí)就已經(jīng)實(shí)現(xiàn)了一個(gè)基本的進(jìn)度條加載功能了。但是上面的效果看起來其實(shí)體驗(yàn)不是很好，要是這個(gè)進(jìn)度條的各個(gè)進(jìn)度值能夠連續(xù)地變化起來就好了，就像下面這樣：

使用loader.js組件實(shí)現(xiàn)進(jìn)度條加載效果

為了做到這一步，有的人可能會(huì)想到去利用transition，通過給進(jìn)度條設(shè)置一個(gè)width .2s類似的transition，那么當(dāng)進(jìn)度條寬度變化的自然就能看到進(jìn)度條連續(xù)變化的效果了。這種方式有兩個(gè)問題：

1. 數(shù)字無法連續(xù)變化，因?yàn)閿?shù)字從一個(gè)值變成另一個(gè)值無法通過transition進(jìn)行過渡；

2. 看不到進(jìn)度條加載到100%，因?yàn)楫?dāng)耗時(shí)任務(wù)完成進(jìn)度為100%的時(shí)候，除了設(shè)置進(jìn)度條的寬度為100%，一般還會(huì)有的邏輯都是隱藏或移除掉進(jìn)度條，而進(jìn)度條因?yàn)橛衪ransition的作用，從它原來的寬度過渡到100%還需要一定的時(shí)間，所以用戶看不到100%了。

不過這兩個(gè)都不是大問題，沒有進(jìn)度數(shù)字的進(jìn)度條也很常見；進(jìn)度條不到100%就進(jìn)入主功能場景的效果也很常見，而且這種效果有時(shí)還能給用戶一種錯(cuò)覺，就是好像真的加載地很快。。

假如要糾結(jié)以上兩個(gè)問題，做一個(gè)有數(shù)字跟進(jìn)度都滿足連續(xù)變化，并且一定要在進(jìn)度條百分百顯示完加載效果之后才進(jìn)入主場景的功能，該如何實(shí)現(xiàn)？就像下面的這個(gè)類似效果：

使用loader.js組件實(shí)現(xiàn)進(jìn)度條加載效果

在這個(gè)要求中，我覺得有兩個(gè)點(diǎn)需要注意：

一是當(dāng)一個(gè)任務(wù)完成的時(shí)候，剩下的任務(wù)可能都還沒有完成，這個(gè)時(shí)候進(jìn)度條就會(huì)進(jìn)入等待狀態(tài)，要等到其它任務(wù)完成，有了新的進(jìn)度之后才能看到下一次的加載效果；

二是進(jìn)度條加載到100%時(shí)的回調(diào)控制，當(dāng)任務(wù)完成進(jìn)度為100%的時(shí)候，進(jìn)度條可能還不到100%，等進(jìn)度條從它當(dāng)前值變到100%的時(shí)候，還需要時(shí)間，所以原來在任務(wù)完成進(jìn)度為100%的時(shí)候添加的一些進(jìn)入主場景之類的邏輯，就要換到進(jìn)度條加載到100%的那個(gè)時(shí)刻去處理了。

綜合以上，我的思路是：

1. 把進(jìn)度條的變化分成多段，因?yàn)槊看魏臅r(shí)任務(wù)的完成，都會(huì)對(duì)應(yīng)一個(gè)進(jìn)度值，這些值大于0且小于等于100，以四個(gè)耗時(shí)任務(wù)為例，它們會(huì)把進(jìn)度條分成：0-25, 25-50, 75-100三段；

2. 把第1步的分段抽象成一個(gè)進(jìn)度條的加載任務(wù)，這個(gè)任務(wù)有兩個(gè)基本屬性：加載時(shí)間，變化區(qū)間。把這個(gè)任務(wù)做成一個(gè)動(dòng)畫，在動(dòng)畫的每次執(zhí)行過程中，給外部提供一個(gè)回調(diào)，并傳入當(dāng)前的進(jìn)度值，以便設(shè)置進(jìn)度條的寬度。當(dāng)前的進(jìn)度值可以根據(jù)動(dòng)畫已經(jīng)執(zhí)行的時(shí)間，加載時(shí)間和變化區(qū)間來計(jì)算。變化區(qū)間對(duì)應(yīng)的就是第1步里面的百分比范圍。加載時(shí)間可以通過變化區(qū)間范圍 * 進(jìn)度條加載1%需要的時(shí)間計(jì)算得到。也就是說要把動(dòng)畫加載1%需要的時(shí)間作為一個(gè)常量。為了更方便一點(diǎn)，把動(dòng)畫從0加載100%需要的時(shí)間作為一個(gè)常量更好控制一些。

3. 定義一個(gè)隊(duì)列，用來存放第2步抽象的加載任務(wù)?？刂坪藐?duì)列第一個(gè)任務(wù)的執(zhí)行時(shí)機(jī)；每執(zhí)行一個(gè)任務(wù)，就自動(dòng)執(zhí)行下一個(gè)。

4. 當(dāng)任務(wù)進(jìn)度是100%并且隊(duì)列里的最后一個(gè)任務(wù)完成的時(shí)候，通知外部進(jìn)行回調(diào)。

這個(gè)demo的實(shí)際效果就跟前面的那個(gè)gif一模一樣。

到此為止，我們就得到了一個(gè)看起來還比較實(shí)用的進(jìn)度條加載效果控制的組件。不過它也不是沒有問題，它的問題在于：進(jìn)度條加載完成的時(shí)間一定會(huì)大于我們?cè)谇懊娴?步設(shè)置的那個(gè)進(jìn)度條一次性從0加載到100%需要的時(shí)間。也就是說這個(gè)做法會(huì)故意延遲整個(gè)耗時(shí)任務(wù)的過程。所以在實(shí)際使用的時(shí)候，前面說的那個(gè)常量不能定義太長了。

看完這篇文章，你們學(xué)會(huì)使用loader.js組件實(shí)現(xiàn)進(jìn)度條加載效果了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細(xì)節(jié)

使用loader.js組件實(shí)現(xiàn)進(jìn)度條加載效果

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽