欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

自己動(dòng)手制作基于jQuery的Web頁面加載進(jìn)度條插件

 更新時(shí)間：2016年06月03日 19:14:44   作者：Aaron  
進(jìn)度條插件在GitHub上多種多樣數(shù)量繁多,這總結(jié)出頁面進(jìn)度條插件的實(shí)現(xiàn)要點(diǎn),來教大家自己動(dòng)手制作基于jQuery的Web頁面加載進(jìn)度條插件

靜態(tài)效果的實(shí)現(xiàn)

網(wǎng)頁頂部加載進(jìn)度條，近年來很流行，很多網(wǎng)站都采用了這種加載方式。網(wǎng)上也有這樣類似的插件，今天我們總結(jié)一下網(wǎng)頁頂部線性頁面加載進(jìn)度條。
大體的寫法如下：

body{
        margin:0;
      }
      #progress {
        position:fixed;
        height: 2px;
        background:#2085c5;
        transition:opacity 500ms linear
      }
      #progress.done {
        opacity:0
      }
      #progress span {
        position:absolute;
        height:2px;
        -webkit-box-shadow:#2085c5 1px 0 6px 1px;
        -webkit-border-radius:100%;
        opacity:1;
        width:150px;
        right:-10px;
        -webkit-animation:pulse 2s ease-out 0s infinite;
      }

      @-webkit-keyframes pulse {
        30% {
          opacity:.6
        }
        60% {
          opacity:0;
        }
        100% {
          opacity:.6
        }
}

html代碼：

<div id="progress">
      <span></span>
</div>

jquery代碼：

$({property: 0}).animate({property: 100}, {
        duration: 3000,
        step: function() {
          var percentage = Math.round(this.property);

          $('#progress').css('width', percentage+"%");

           if(percentage == 100) {
              $("#progress").addClass("done");//完成，隱藏進(jìn)度條
            }
        }
});

設(shè)定其持續(xù)時(shí)間是3秒鐘！你可以改動(dòng)一下，把3秒鐘的時(shí)間改成你網(wǎng)頁的加載時(shí)間，就可以做出網(wǎng)頁動(dòng)態(tài)加載進(jìn)度條了。。

頁面加載插件的實(shí)際應(yīng)用及l(fā)oad函數(shù)的運(yùn)用
關(guān)于頁面的加載，很難找到一個(gè)很好的方法來獲取頁面的實(shí)際下載進(jìn)度。下面介紹的方法是運(yùn)用 $(window).load(function() {})和$(document).ready(function(){})來進(jìn)行的，雖然這種方法不是很準(zhǔn)確，但是也可以模擬網(wǎng)頁的下載。

$(function(){
NProgress.start();
})

$(window).load(function() {
  NProgress.done();
})

有很多朋友可能對 $(window).load(function() {})和$(document).ready(function(){})的區(qū)別不是很了解。大家可以寫一個(gè)小案例來測試一下！

例如：

$(window).load(function() {
  alert("我是load")
})
$(function(){
 alert("我是document.ready")
})

很明顯，肯定是document.ready先執(zhí)行，因?yàn)閐ocument.ready是在DOM結(jié)構(gòu)載入完后執(zhí)行的，不需要載入得這么“完全”，而$(window).load則是頁面全部內(nèi)容加載完成后執(zhí)行的。

有時(shí)候，

$(window).load(function() {
  alert("我是load")
})

也可以用js的寫法：

window.onload = function(){ ... }

都是在頁面全部下載完成之后來執(zhí)行的。兩種寫法是等價(jià)的！

相關(guān)文章

最新評論