Loading效果實現：載入新頁面前的等待過渡畫面

阿新 • • 發佈：2019-01-25

由於最近在寫一個web專案，由於前端框架開發，和後臺查資料的語法不成熟導致頁面載入速度過慢，遂想到用loading效果來過渡:

粗略的查閱了下網上的實現方法，在此總結下方法實現

先上效果圖：

程式碼：

<link rel="stylesheet" href="http://lee.dkfirst.cn/lee_loading.css">
 <script src="http://lee.dkfirst.cn/lee_loading.js"></script>

上面兩段程式碼放在<head></head>中間即可

思路詳解：

JS部分

：在頁面載入前就先載入一個div罩，等待頁面全部載入完成後，關閉此div罩

//獲取瀏覽器頁面可見高度和寬度  
var _PageHeight = document.documentElement.clientHeight,
    _PageWidth = document.documentElement.clientWidth;
//計算loading框距離頂部和左部的距離（loading框小部件的寬度為90px，高度為90px）  
var _LoadingTop = _PageHeight > 90 ? (_PageHeight - 90) / 2 : 0,
    _LoadingLeft = _PageWidth > 90 ? (_PageWidth - 90) / 2 : 0;
//在頁面未載入完畢之前顯示的loading Html自定義內容  
var _LoadingHtml = '<div id="loadingDiv" style="position:absolute;left:0;width:100%;height:' + _PageHeight + 'px;top:0;background:#FFFFFF;opacity:1.0;
                    filter:alpha(opacity=80);z-index:10000;">
                    <div class="spinner" style="position: top: 60px; margin:' + _LoadingTop + 'px auto ;"></div></div>';
//呈現loading效果  
document.write(_LoadingHtml);

//監聽載入狀態改變  
document.onreadystatechange = completeLoading;

//載入狀態為complete時移除loading效果  
function completeLoading() {
    if (document.readyState == "complete") {
        //此引用了Jquery，頁面沒有導jq包的，需要自行加入 

        $("#loadingDiv").fadeOut(1500);
    }
}


CSS部分：CSS3構造一個無限迴圈動作的loading框
.spinner {
 width: 60px;
 height: 60px;
 background-color: #67CF22;
 
 margin: 100px auto;
 -webkit-animation: rotateplane 1.2s infinite ease-in-out;
 animation: rotateplane 1.2s infinite ease-in-out;
 
}
 
@-webkit-keyframes rotateplane {
 0% { -webkit-transform: perspective(120px) }
 50% { -webkit-transform: perspective(120px) rotateY(180deg) }
 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }
}
 
@keyframes rotateplane {
 0% {
 transform: perspective(120px) rotateX(0deg) rotateY(0deg);
 -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
 } 50% {
 transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
 -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
 } 100% {
 transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
 -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
 }
}

Loading效果實現：載入新頁面前的等待過渡畫面

由於最近在寫一個web專案，由於前端框架開發，和後臺查資料的語法不成熟導致頁面載入速度過慢，遂想到用loading效果來過渡: 粗略的查閱了下網上的實現方法，在此總結下方法實現先上效果圖：程式碼： <link rel="stylesheet" href="http://lee.dkf

頁面loading效果實現程式碼

有些頁面載入起來比較慢，為了加強使用者體驗效果，所以一般都會做一個頁面載入等待的提示，頁面載入完成後消失。下面提供一個可以拿來即用的方案。 <!DOCTYPE html> <html lang="en"> <head> <meta

載入新頁面等待過渡效果

由於資料量龐大後臺查資料的操作的時候慢從而導致頁面載入速度過慢，所以會到用loading效果來過渡，讓使用者感覺上不是很慢。下面是效果圖實現步驟：引入layer.js,如果追求極致效能的可以把js下載下來，引用本地的檔案 <script src="

控制使用jquery load()方法載入新頁面中的元素

三個參數解決獲取參數頁面紮實第一個之前簡單最近在項目中用到jquery的load()方法來加載頁面，首先簡單說一下load()方法。 load(url,data,callback);該方法接收三個參數，第一個是載入的頁面地址，第二個是要傳到服務器的參數，第

短信驗證碼js效果實現(防刷新)

1.0 ptc disable url http 按鈕發送短信 color 實現 <script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.js"></script> <script

flask-script實現自動刷新頁面調試

har col __main__ 官網 127.0.0.1 main hand serve 路由本文flask==1.0.2 1、導入extension包 from flask_script import Manager 2、使用manager管理工具 app =

window.open在不載入新頁面的情況下進行列印

今天在工作中遇到了這樣一個需求，頁面要求在當前進行列印輸出，入門級程式設計師，所以首先想到的就是使用window.open方法載入頁面，然後使用window.print進行列印，但使用window.open要麼開啟新視窗然後進行列印輸出，要麼更改當前頁面內容，列

php 瀏覽器不快取頁面，後退或history.go(-1)是載入新頁面同時也是瀏覽不留痕

//禁止快取頁面防止訂單頁面不給錢直接返回鍵導致購物車中生成訂單的商品還存在 $time = time() - 60*60*24;// or filemtime($fn), etc header('Last-Modif

Js: loading效果實現

function easy_loading(id){ var symbol = ['-', '\\', '|', '/'], elem = document.getElementById(id), i = 0;

js載入Json陣列實現ajax載入動態頁面資料

jQuery載入全部頁面完成前的loading效果

此效果的原理：在頁面載入完成前在整個頁面上邊覆蓋一層，即loading層，等到頁面載入完成後，將loading層隱藏。此效果的HTML程式碼部分：在整個程式碼前，新增div，即loading層（可以新增load的圖片，也可以當做背景圖寫在css裡） <div id="load

vue實戰之狗血事件：頁面loading效果詭異之事

after 不變編譯全局 before 組件定時器 route vuex 接上回想加一個切換路由時，跳出一個loading動畫，路由加載後就消失先做了一個loading提示的浮動層的組件，全局註冊，在幾個路由頁面都引入在vuex裏面維護一個變量比如isLoad

前端頁面loading效果(CSS實現)

當首頁內容或圖片比較多時，載入時間會比較長，此時可能出現頁面白屏的情況，使用者體驗較差。所以，在頁面完全加載出來之前，可以考慮加入loading效果，當頁面完全載入完後，是loading消失即可。 1. 方法 html: 在頁面開頭部分加入： <div id="loading">

js實現所有非同步請求全部載入完畢後，loading效果消失

　　在實際開發中，一定有情況是這樣的，一個頁面我們有多個地方請求了ajax，在這種情況下，我們要實現資料沒來之前出現我們炫酷的loading效果，而且要等到所有的ajax都請求完畢後，才讓我們的loading效果消失，那麼問題來了，每個ajax請求資料的時間都是不確定的，我們這個loading效果結束的

php+ajax實現登入按鈕載入loading效果

php+ajax實現登入按鈕載入loading效果，一個提高使用者體驗，二個避免重複提交表單，ajax判斷載入是否完成。登入表單 1 <form onsubmit="return check_login()" style="text-align: center;margi

關於網頁載入，頁面頂部顯示頁面載入線性進度條效果實現。

今早早逛淘寶的時候突然發現淘寶每次在點選進入下頁的時候的頁面頂部就會出現頁面載入進度效果，其實之前在訪問好多國外的網站的時候也見過這樣的效果，突然一時興起想要知道如何實現。如圖所示：然後就百度一下，竟然找到了兩款外掛，。外掛一：LoadingBa

使用jquery實現頁面滾動到底部自動載入新的資訊

//定義載入一次的資訊物件數量 public class Constant { public final static int DEFAULT_FIRST_COUNT = 8;//第一次列

2015-12-8-一個功能引導頁面的實現思路（效果參考：美麗說app）

原型美麗說app的首頁引導效果圖如下：下載美麗說的apk，解壓後，找到切圖如下：可以看到，由於切圖右下角留出白色透明圓圈，所以有了上面的效果。進一步思考由於android螢幕尺寸的碎片化，所以如果我們要做一張固定

正在下載中，請稍候的Loading載入中浮層效果實現

背景: 當實現下載檔案等後臺需長時間處理時，使用者點選頁面的一個按鈕或連結，應給予使用者一定提示告知使用者後臺正在處理中，稍後返回結果。目前常見的處理方法有頁面跳出圖層，比如"Loading…"，“後

三種方式實現自定義圓形頁面載入中效果的進度條，包含一個好看的Android UI

效果圖如下：下載地址樣式一、通過動畫實現定義res/drawable/loading.xml如下： <?xml version="1.0" encoding="UTF-8"?> <animation-list android:oneshot=

Loading效果實現：載入新頁面前的等待過渡畫面

相關推薦