1. 程式人生 > >載入新頁面等待過渡效果

載入新頁面等待過渡效果

由於資料量龐大後臺查資料的操作的時候慢從而導致頁面載入速度過慢,所以會到用loading效果來過渡,讓使用者感覺上不是很慢。下面是效果圖

實現步驟:

引入layer.js,如果追求極致效能的可以把js下載下來,引用本地的檔案

<script src="https://cdn.bootcss.com/layer/2.3/layer.js" ></script>

2. 定義對應的loading方法方便呼叫

function loading(msg) {
    layer.msg(msg, {
        icon: 16,
        shade: [0.6, '#000005'],//遮罩的顏色與透明度
        time: false  //取消自動關閉
    })
};

 3.傳送請求之前呼叫loading方法,呼叫完畢後關閉載入

    $.ajax({
        url:"/login/login",
        method:"post",
        data:
        {
            username : $("#form-username").val(),
            password : transfAuth($("#form-password"))
        },
        beforeSend : function(){
            loading("載入中");
        },
        success:function()
        {
             layer.closeAll();
        },
        error:function()
        {
             layer.closeAll();
        }
    });

相關推薦

載入頁面等待過渡效果

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

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

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

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

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

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

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

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

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

被忽視的META標簽之特效(頁面過渡效果)

濾鏡 頁面過渡 coo 制作 轉化 頁面 索引 ner 標簽 在web設計中使用js可以實現很多的頁面特效,然而很多人卻忽視了HTML標簽中META標簽的強大功效,其實meta標簽也可以實現很多漂亮的頁面過渡效果。 META標簽是HTML語言HEAD區的一個輔助性標簽,Me

vue 頁面過渡效果

exp uid () ESS transform ets ive route aci App.vue 模板 <template> <div id="app"> <transition :name="transition">

IONIC 頁面下拉載入的資料(ion-infinite-scroll的使用)

         類似於淘寶,瀏覽商品時,每次下拉都會刷新出新的資料(需要配合分頁使用,分頁在我部落格中有介紹:https://mp.csdn.net/postedit/83584133) html頁面  <ion-heade

為頁內的tab新增的iframe新增載入動畫過渡效果

var iframe = $("iframe[data-id=" + id + " ]"); if (iframe.length > 0) { var exist = $(iframe[0]).attr("exist");

簡單實用的JS實現頁面載入完畢之前loading提示效果(相容性較強的loading載入程式碼)

一種簡單實用的JS實現頁面載入完畢之前loading提示效果 做成js呼叫即可: 一、JS程式碼: var _PageHeight = document.documentElement.clientHeight, _PageWidth = documen

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

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

MUI-開啟頁面,傳引數,設定展示效果

主頁面中開啟新視窗設定: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-w

JS實現頁面載入結束之前Loading提示效果

//獲取瀏覽器頁面可見高度和寬度 var _PageHeight = document.documentElement.clientHeight,     _PageWidth = document.documentElement.clientWidth; //計算loa

JS實現頁面載入完畢之前loading提示效果

做成js呼叫: base-loading.js程式碼 /******************************************* * * 建立人:Quber([email protected]) * 建立時間:2014年6月10日 *

CSS實現的loading頁面等待效果

            有些頁面載入起來比較慢,為了加強使用者體驗效果,所以一般都會做一個頁面載入等待的提示,頁面載入完成後消失。下面是用CSS實現的一個簡單的頁面載入等待效果,大家可以參考: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HT

前段在指定DIV區域載入的HTML頁面內容

兩種方法:       1 通過標籤的形式: <div class="main-content"> <!--src 為要載入的頁面--> <iframe src="index-demon.html" width="1480p

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

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

ios頁面過渡效果外掛Kontext

<!doctype html> <html> <head> <meta charset="utf-8"> <title>模擬蘋果ios系統頁面過渡效果外掛-柯樂義</title><base target="_blank"

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

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

Flash頁面過渡效果之百葉窗

 廢話不說,直入正題。1)首先匯入兩張圖片,並分別降這兩張圖片放置在兩個圖層上。2)新建一個影片剪輯,命名為“葉子”。在此影片剪輯中畫一個無線框的矩形,寬度和圖片的寬度相同。高度為圖片高度的十分之一;在30幀處將該矩形的高度修改為1個象素。最後點選該影片剪輯的第一幀,在屬性面