搜索
SR網頁設計工作室 - 購物網站/企業官網專業開發 JS程式語法 超簡易網頁 Loading 載入效果設計 (超實用 好東西不用嗎 ...
byadmin 發表於 2015-4-24 17:30:32 , 38256人已閱讀 , 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 完工 ! 是不是很簡單呢 ~ 趕緊來試一下吧...




Traffic Exchange Site
您需要登錄後才可以回帖 登錄 | 立即註冊

作者資訊

文章分類

SR數位設計工作室

  • 服務專線:03-3555-069


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

信箱:sr.design2011@gmail.com

, Processed in 0.067908 second(s), 43 queries , Gzip On.

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

Core - DZ2.5 GMT+8, 2021-9-20 03:49

回頂部