亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

jQuery 頁(yè)面載入進(jìn)度條實(shí)現(xiàn)代碼

 更新時(shí)間:2009年02月08日 15:43:09   作者:  
頁(yè)面 Loading 條基本人人都會(huì)用。它的原理很簡(jiǎn)單:在頁(yè)頭放置一個(gè)文字或者圖片的 loading 狀態(tài),然后頁(yè)尾載入一段 JS 隱藏掉,即根據(jù)瀏覽器的載入順序來(lái)實(shí)現(xiàn)的簡(jiǎn)易 Loading 狀態(tài)條。

loading Process traditional

上圖展示了傳統(tǒng) Wordpress 模板在瀏覽器中的載入順序,Loading 條的出現(xiàn)和消失分布于頭尾。

new loading bar


如果我們?cè)陧?yè)面的不同位置放置多個(gè) JS ,每個(gè) JS 用于逐步增加 Loading 條的寬度,那么這個(gè) Loading 條無(wú)疑會(huì)更具實(shí)用價(jià)值。它在一定程度上緩解了訪客等待載入的枯燥感,同時(shí)還能客觀反映頁(yè)面載入的進(jìn)度。若再配以 jQuery 內(nèi)建的動(dòng)畫(huà)效果,其完全可以與瀏覽器自帶的狀態(tài)條媲美。
先來(lái)看一個(gè)演示:地址。
要得到演示上的進(jìn)度條效果,首先,引入 jQuery 框架(一定要放在頁(yè)頭 <head> 標(biāo)簽內(nèi))。然后在 <body> 標(biāo)簽起始位置放置:
復(fù)制代碼 代碼如下:

<div id="loading"><div></div></div>

CSS 可以這么寫(xiě):
復(fù)制代碼 代碼如下:

#loading {
width:100px;
height:20px;
background:#A0DB0E;
padding:5px;
position:fixed;
left:0;
top:0;
}
#loading div {
width:1px;
height:20px;
background:#F1FF4D;
}

準(zhǔn)備工作到這里就做好了。
接著,請(qǐng)隨意發(fā)揮,依照你對(duì)圖二的理解,在模板各個(gè)部分的適當(dāng)位置放置:
復(fù)制代碼 代碼如下:

<script type="text/javascript">
$("#loading div").animate({width:"16px"})
</script>

其中紅色數(shù)值應(yīng)該隨載入順序逐步增加,直到 footer.php。另外別忘了在 footer.php 最末尾放上:
復(fù)制代碼 代碼如下:

<script type="text/javascript">
$("#loading").fadeOut()
</script>

用于載入完畢后隱藏進(jìn)度條。

相關(guān)文章

  • 實(shí)例講解JQuery中this和$(this)區(qū)別

    實(shí)例講解JQuery中this和$(this)區(qū)別

    這篇文章主要介紹了實(shí)例講解JQuery中this和$(this)的區(qū)別,this表示當(dāng)前的上下文對(duì)象是一個(gè)html對(duì)象,可以調(diào)用html對(duì)象所擁有的屬性和方法,$(this),代表的上下文對(duì)象是一個(gè)jquery的上下文對(duì)象,可以調(diào)用jquery的方法和屬性值,需要的朋友可以參考下
    2014-12-12
  • 分享20款好玩的jQuery游戲

    分享20款好玩的jQuery游戲

    jQuery是時(shí)下最流行的 JavaScript 庫(kù)?,F(xiàn)在,除了HTML5以外,也有很多jQuery愛(ài)好者使用jQuery來(lái)開(kāi)發(fā)游戲,雖然效果沒(méi)有Flash那么好,但是這些游戲也看起來(lái)很酷。
    2011-04-04
  • EasyUI創(chuàng)建對(duì)話框的兩種方式

    EasyUI創(chuàng)建對(duì)話框的兩種方式

    對(duì)話框(Dialog)是一個(gè)特殊的窗口(window),可以包含在頂部的工具欄和在底部的按鈕。接下來(lái)通過(guò)本文給大家介紹easyui創(chuàng)建對(duì)話框的兩種方式,非常不錯(cuò),感興趣的朋友一起看下吧
    2016-08-08
  • 基于jQuery仿淘寶產(chǎn)品圖片放大鏡特效

    基于jQuery仿淘寶產(chǎn)品圖片放大鏡特效

    這篇文章主要介紹了基于jQuery仿淘寶產(chǎn)品圖片放大鏡特效,使用非組件方法來(lái)實(shí)現(xiàn)放大鏡效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-01-01
  • 基于jquery1.4.2的仿flash超炫焦點(diǎn)圖播放效果

    基于jquery1.4.2的仿flash超炫焦點(diǎn)圖播放效果

    有了jquery一切變的如此簡(jiǎn)單!讓js做的動(dòng)畫(huà)更有動(dòng)感。
    2010-04-04
  • jQuery實(shí)現(xiàn)的簡(jiǎn)潔下拉菜單導(dǎo)航效果代碼

    jQuery實(shí)現(xiàn)的簡(jiǎn)潔下拉菜單導(dǎo)航效果代碼

    這篇文章主要介紹了jQuery實(shí)現(xiàn)的簡(jiǎn)潔下拉菜單導(dǎo)航效果代碼,通過(guò)簡(jiǎn)單的自定義函數(shù)實(shí)現(xiàn)頁(yè)面樣式切換功能,非常簡(jiǎn)潔實(shí)用,需要的朋友可以參考下
    2015-08-08
  • 用jquery生成二級(jí)菜單的實(shí)例代碼

    用jquery生成二級(jí)菜單的實(shí)例代碼

    這篇文章介紹了用jquery生成二級(jí)菜單的代碼,需要的朋友可以參考一下
    2013-06-06
  • jquery調(diào)整表格行tr上下順序?qū)嵗v解

    jquery調(diào)整表格行tr上下順序?qū)嵗v解

    這篇文章主要為大家介紹了jquery調(diào)整表格行tr上下順序?qū)嵗?,具有一定的參考價(jià)值,感興趣的朋友可以參考一下
    2016-01-01
  • jQuery獲取DOM節(jié)點(diǎn)實(shí)例分析(2種方式)

    jQuery獲取DOM節(jié)點(diǎn)實(shí)例分析(2種方式)

    這篇文章主要介紹了jQuery獲取DOM節(jié)點(diǎn)的方法,提供了兩種jQuery獲取DOM節(jié)點(diǎn)的技巧,需要的朋友可以參考下
    2015-12-12
  • 以WordPress為例講解jQuery美化頁(yè)面Title的方法

    以WordPress為例講解jQuery美化頁(yè)面Title的方法

    鼠標(biāo)移動(dòng)到超鏈接時(shí)顯示Title提示即是所謂Title美化的一般手段,這里我們就以WordPress為例講解jQuery美化頁(yè)面Title的方法,需要的朋友可以參考下
    2016-05-05

最新評(píng)論