自己動手制作基于jQuery的Web頁面加載進度條插件
靜態(tài)效果的實現(xiàn)
網(wǎng)頁頂部加載進度條，近年來很流行，很多網(wǎng)站都采用了這種加載方式。網(wǎng)上也有這樣類似的插件，今天我們總結一下網(wǎng)頁頂部線性頁面加載進度條。
大體的寫法如下：
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");//完成，隱藏進度條
}
}
});
設定其持續(xù)時間是3秒鐘！你可以改動一下，把3秒鐘的時間改成你網(wǎng)頁的加載時間，就可以做出網(wǎng)頁動態(tài)加載進度條了。。
頁面加載插件的實際應用及l(fā)oad函數(shù)的運用
關于頁面的加載，很難找到一個很好的方法來獲取頁面的實際下載進度。下面介紹的方法是運用 $(window).load(function() {})和$(document).ready(function(){})來進行的，雖然這種方法不是很準確，但是也可以模擬網(wǎng)頁的下載。
$(function(){
NProgress.start();
})
$(window).load(function() {
NProgress.done();
})
有很多朋友可能對 $(window).load(function() {})和$(document).ready(function(){})的區(qū)別不是很了解。大家可以寫一個小案例來測試一下！
例如：
$(window).load(function() {
alert("我是load")
})
$(function(){
alert("我是document.ready")
})
很明顯，肯定是document.ready先執(zhí)行，因為document.ready是在DOM結構載入完后執(zhí)行的，不需要載入得這么“完全”，而$(window).load則是頁面全部內(nèi)容加載完成后執(zhí)行的。
有時候，
$(window).load(function() {
alert("我是load")
})
也可以用js的寫法：
window.onload = function(){ ... }
都是在頁面全部下載完成之后來執(zhí)行的。兩種寫法是等價的！
相關文章
這篇文章主要介紹了jquery ajax分頁插件的簡單實現(xiàn)的相關資料,需要的朋友可以參考下2016-01-01
有時我們需要動態(tài)的展示訪問次數(shù)、下載次數(shù)等效果，我們可以借助jQuery結合后臺php實現(xiàn)一個滾動的數(shù)字展示效果。2015-08-08
實例中涉及到使用動畫方法animate，動畫停止方法Stop，其他詳情在示例代碼中都有注釋。2013-03-03
jQuery基于json與cookie實現(xiàn)購物車的方法
這篇文章主要介紹了jQuery基于json與cookie實現(xiàn)購物車的方法,涉及jQuery操作json格式數(shù)據(jù)與cookie存儲購物車信息的相關技巧,需要的朋友可以參考下2016-04-04
這篇文章主要介紹了jQuery插件開發(fā)的五種形態(tài)小結，具體的內(nèi)容就是解決javascript插件的8種特征，非常的詳細，這里推薦給小伙伴們。2015-03-03
Jquery 自定義事件實現(xiàn)發(fā)布/訂閱的簡單實例
下面小編就為大家?guī)硪黄狫query 自定義事件實現(xiàn)發(fā)布/訂閱的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
這篇文章主要介紹了jquery獲取tr并更改tr內(nèi)容示例代碼,需要的朋友可以參考下2014-02-02
jquery下將選擇的checkbox的id組成字符串的方法
jquery下將選擇的checkbox的id組成字符串的方法，需要的朋友可以參考下。2010-11-11
jquery處理頁面彈出層查詢數(shù)據(jù)等待操作實例
這篇文章主要介紹了jquery處理頁面彈出層查詢數(shù)據(jù)等待操作,實例分析了jquery實現(xiàn)等待效果的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
基于JQuery的模擬蘋果桌面Dock效果(穩(wěn)定版)
之所以將它命名為穩(wěn)定版，是因為之前已經(jīng)分享了一個初級版本的，之前的初級版中存在很多bug。現(xiàn)在經(jīng)過反復琢磨、實驗，修復了之前版本存在的很多不足之處，就算鼠標快速的滑動依然表現(xiàn)的很穩(wěn)定2012-10-10