服務信箱：sr.design2011@gmail.com搜尋本網站

SR網頁設計工作室 - 購物網站/企業官網專業開發

搜索
SR網頁設計工作室 - 購物網站/企業官網專業開發 › JS程式語法 › 超簡易網頁 Loading 載入效果設計 (超實用 好東西不用嗎 ...

超簡易網頁 Loading 載入效果設計 (超實用 好東西不用嗎?)

byadmin 發表於 2015-4-24 17:30:32 , 46021人已閱讀 , 0人回應
網頁載入LOADING效果.jpg


網站載入提示對於網頁設計應用來說非常重要 ! 尤其是當你的網站速度不是非常快的時候，若沒有載入提示，對於網站用戶離開當頁的機會將會提高很多，因為正常網站使用者都無法忍受「未知」的等待，因此若您的網頁有個貼心的載入提醒，對於用戶來說可能會增加一些等待的意願。

所以今天來教大家一個非常簡易的 Loading 效果 !
這裡我們將會使用到 jQuery 的 「 $(window).load 」函數，這個函數的意義在於，必須等到網頁中(包括圖片)的所有元素載入完畢後才會執行裡面的動作內容。OK 這就是我們要的 ! 因為我們目前想要達到的目的效果就是，將網頁載入效果(無論是文字或圖片)預設顯示，當 $(window).load 完畢後，再執行隱藏(HIDE)動作，這樣就完成了一個簡單的Loading 效果 .

HTML程式碼部分

這部分的文字可換成Loading圖片, 大家請隨意
  1. <div id='loading'>正在載入頁面資料...</div>
複製代碼

CSS 美化


再來幫剛剛的loading div稍微美化加工一下，這裡分享一下簡單的CSS效果
  1.     z-index: 1;
  2.     padding: 10px 10px 5px;
  3.     background: rgb(255, 0, 136);
  4.     left: 0;
  5.     top: 0;
  6.     color: #fff;
  7.     position: fixed;
  8.     width: 150px;
  9.     height: 30px;
  10.     text-align: center;
  11.     box-shadow: 2px 2px 10px;
  12.     border-radius: 5px;
複製代碼

JQUERY部分


請先在網頁HEAD標籤中引用JQuery文件
  1. <script type="text/javascript" src="catalog/view/javascript/jquery/jquery-1.6.1.min.js"></script>
複製代碼
接著在BODY結尾標籤處加入以下程式碼
  1. <script>
  2. $(window).load(function(){
  3.         $('#loading').hide(1000);
  4.         });
  5. </script>
複製代碼
OK 完工 ! 是不是很簡單呢 ~ 趕緊來試一下吧...




jquery, loading, 網頁設計

相關帖子

收藏回覆 只看該作者 道具 舉報

返回列表
Traffic Exchange Site
高級模式
B Color Image Link Quote Code Smilies
您需要登錄後才可以回帖 登錄 | 立即註冊

作者資訊

admin

文章分類

Contact us

歡迎您使用以下方式聯繫我們 , 本工作室服務時間為每日早上10:00點至晚間7:30點 ,也可點選下方 Contact us 進入留言板留下您的問題與相關聯絡資訊 , 我們將會儘快了解與回覆您。

SR數位設計工作室

  • 服務專線：03-3555-069


ECSHOP購物網站開發|接案說明|線上洽詢|隱私權政策|SR數位設計(CMS)

信箱：sr.design2011@gmail.com

本網站推薦使用以下瀏覽器 (請點擊圖式下載)

, Processed in 0.055256 second(s), 42 queries , Gzip On.

Copyright © 2011-2014 Template By SR網頁設計清新部落風格

Core - DZ2.5　GMT+8, 2024-11-21 21:01

回頂部