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
一周排行