jquery fakeLoader.js創建頁面載入動畫例子

fakeLoader.js 是輕量級的 jQuery 插件,幫助你創建動態的全屏載入掩飾微調效果,模擬頁面預載入的效果,下面我們就一起來看一個fakeLoader.js創建頁面載入動畫例子。


HTML

我們只需要在<body>的第一行加入以下代碼。

<div id="fakeLoader"></div>

CSS

然後在<head>裏載入css樣式文件。

<link rel="stylesheet" href="css/fakeLoader.css">

JS

別忘了載入jQuery庫文件以及fakeLoader.js。

<script src="js/jquery.js"></script>
<script src="js/fakeLoader.min.js"></script>

然後在</body>的上一行加入以下代碼:

<script type="text/javascript">
$("#fakeloader").fakeLoader();
</script>

以上代碼就是調用了fakeLoader.js插件,該插件還提供了以下選項設置。
timeToHide:過渡載入動畫時間,毫秒,默認1200。
spinner:動畫效果,有7個值可選: 'spinner1', 'spinner2', 'spinner3', 'spinner4', 'spinner5', 'spinner6', 'spinner7',默認值:spinner1。
bgColor:過渡遮罩層背景色,默認:"#2ecc71"。
imagePath:自定義過渡動畫圖片。

更多相關文章
  • CSS3 Animations創建返回頂部的平滑動畫
    返回頂部在css3未出來前我們都是使用jquery或原生的js來實現返回頂部了,現在有了css3我們可以輕松的實現返回頂部了,具體給各位介紹一下.一般在一個長的網頁中,我們都會有一個按鈕,讓用戶能夠快速的定位到網頁的不同地方,一般都是一個返回頂部的按鈕,這個功能我們都是使用的jQuery來完成,但是 ...
  • 利用css3制作loading效果是非常的簡單的一事情,感覺和html5有點像了,下文整理一篇CSS3制作loading載入動畫效果例子,有興趣的可進入參考.在我們這次的新設計教程中,我將向您展示如何創建純CSS3的
  • 本文章重點是爲各位介紹頁面載入插件的實際應用及load函數的運用,有需要了解的可進入參考.關于頁面頭部載入的一些實例,裏面提到了2個jquery頁面插件,這兩個插件很不錯,同時我也看了一下pace.js,這個插件.看了一下谷歌浏覽器等的頁面載入.關于頁面的載入,很難找到一個很好的方法來獲取頁面的實際 ...
  • jquery loading頁面載入效果加入一個小小的 loading 效果,會使得這個頁面極其富有“生命力”.也能減緩用戶急躁的等待情緒,同時也在視覺效果上得到體現.其實現方式也極其簡單function loadT
  • 本文章給各位介紹一個jQuery插件DLoad實現延遲載入圖片編程全過程,有需要了解的同學可參考.修改:1.減少代碼量2.加快代碼運行;3.某些載入時出現的錯誤;4.部分圖片載入失敗5.使調用更方便隱藏並顯示等待 $
  • 本文章來給各位同學介紹jQuery/JavaScript 實現的異步載入圖片效果,有需要了解的朋友可進入參考.在上代碼之前先說一下簡單的原理,我們知道在 img 標簽中的 src 屬性是指向圖片地址,要實現異步載入,
  • WordPress啓用Memcache 加快頁面載入速度可以幫助我們讓用戶更快的訪問我們的頁面了,今天我們就來看WordPress啓用Memcache的方法及碰到的問題解決辦法.大部分使用Wordpress建站的站長都是使用動態頁面或者僞靜態頁面,用戶請求頁面時就免不了從數據庫中讀取內容,減緩了頁面 ...
  • 下面我來給大家轉一個關于Laravel4創建一個占位圖片服務例子,有需要了解的朋友可看看.使用Composer安裝intervention/image庫 代碼如下 composer require intervent
一周排行
  • 下面小編來爲各位整理了一些關于sqlserver2005創建維護計劃任務向導失敗解決辦法,希望下文可以幫助到各位.數據庫:Microsoft SQL Server 2005 企業版當使用維護計劃向導作數據庫自動備份,
  • csol2首領模式怎麽玩
    csol2首領模式怎麽玩?這種新的玩法許多的玩家不清除如何來完了,今天小編來爲各位介紹一下
  • wordpress利用Open Social插件添加QQ等社交帳號登錄
    Open Social是一個開源插件了,我們站長如果對于第三方社交帳號登錄開發不了解,可以
  • 在mysql中如果我們在命令模式下選擇與切換數據庫直接使用use即可,在php中選擇數據使用mysql_select_db即可,下面我來介紹一下.從命令提示符,選擇MySQL數據庫: 這是很簡單的選擇一個特定的數據庫
  • oracle數據庫ORA-600 2663 錯誤我們很多朋友不知道如何來解決,下文整理了一個站長分享的oracle數據庫ORA-600 2663 錯誤解決辦法,下面一起來看看朋友數據庫啓動遭遇ORA-00600[26
  • OPPO R7 Plus手機SIM卡安裝圖文教程
    OPPO R7 Plus手機是r7的新機型了,這款手機SIM卡如何安裝呢,對于新購置這款手
  • 三星I9300與I9308如何備份短信到SD卡
    當您對手機恢複出廠設置之前,我們都會建議您要提前備份聯系人.短信.多媒體文件等數據,以免重
  • 前面介紹過ubuntu安裝lamp環境下面我們看一個centos最快捷簡單安裝nginx.mysql.php的解決方案,希望文章給各位同學有所幫助.對于lnmp的安裝,每個運維人員可能都進行過上百次.這裏提供一個我認 ...
  • 我們如果要利用js來控制div顯示與隱藏的話我們可使用js來控制style來定義display來設置,這樣只要動態的設置none與block即可實現div隱藏與顯示了.簡單指向文字顯示內容實例 代碼如下 <ht ...
  • 在mysql用來對字符型的時間日期格式化我們常用CONVERT()函數來操作,下面我來給各位朋友詳細介紹CONVERT()函數的使用方法,大家可參考.格式:CONVERT(data_type,expression[, ...