JQuery 資料載入中禁止操作頁面

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

比較常見的做法，但對我而言是第一次做，記錄一下。

為了把找來的loading.gif 的背景色設定為透明，還特意裝了quicktime。

有學到一些額外的東西。

先將div及img定義好

<body>
     <div id="loadingDiv">
	<img src="loading.gif" style="margin-top:230px;margin-left:700px;" /> 
     </div>
</body>

注意：在img內可以用margin-top 和 margin-left 將loading的圖片調整到列表正中央。

css樣式(重點)

  	#loadingDiv {
	    background-color:grey;
	    filter: alpha(opacity=50); <!--IE的透明度-->
	    opacity: 0.1;<!--透明度，數值越大越透明，不要調太小，不然gif圖片會特別模糊-->
	    display: none;
	    position: absolute;
	    top: 0px;
	    left: 0px;
	    width: 100%;
	    height: 100%;
	    z-index: 100; <!--此處的圖層要大於頁面-->
	    display:none;
    }

注意：此處用的id樣式，頁面初始化即啟用，且已在樣式內將該div設定為不顯示。

之後將在js內動態調整它的隱藏與顯示屬性。當它顯示時，將會遮蓋住整個body，

使用者無法對頁面進行任何操作。

javascript程式碼：

function loadData(){
		//彈出遮蓋層
		$("#loadingDiv").fadeTo(200,0.5);
		
	    $.ajax({
            url: 'xx/xx!query.action',
            dataType:"json",
            type: 'POST',
            success: function(data) { 	

			     //此處是載入列表資料的程式碼
			     
				 //資料載入完畢，則關閉遮蓋層
				 $("#loadingDiv").fadeOut(200);
			     
            }
        });
	}

注意：這裡用了fadeTo和fadeOut來顯示和隱藏div，當然也可以用 show 和 hide。

JQuery 資料載入中禁止操作頁面

比較常見的做法，但對我而言是第一次做，記錄一下。為了把找來的loading.gif 的背景色設定為透明，還特意裝了quicktime。有學到一些額外的東西。先將div及img定義好 <body> <div id="loadingDiv"> <img

用載入圖片解決在ajax資料載入中頁面出現短暫空白的問題

在專案中用ajax非同步獲取資料後有時會因為資料問題或者網路問題，頁面一直顯示空白，現在用載入圖片來過渡這種狀態： <script> $(function(){ $.ajax({

jQuery實現載入中效果,防止重複提交

//匯出表格載入中的提示var dian=0;//控制'●'的個數var t=null;//停止時使用function id_loadspot(loadspotSpan,loadingDiv,exportLink){ 　　loadingDiv.css('visibility','visible');//顯示

mint-ui 圖片懶載入及請求資料載入中提示方法

圖片懶載入：引入需要的檔案<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script><!-

幾種常見的載入中、loading頁面效果的實現方法總結

<html> <head> <title>正在載入...</title> <meta http-equiv="Content-Type" c> </head> <body bgcolor="#FFFFFF" leftmargin="

Vue使用jQuery ajax載入資料頁面無顯示解決方法

無資料程式碼為 <script> new Vue({ el:"#demo", data:{list:find()} }) function find(){ var ss; $.ajax(

IE8中jQuery.load()載入頁面不顯示的原因

一、jQuery.load() jQuery.load(url,[data],[callback])通過Ajax非同步請求載入伺服器中的資料，並把資料放到指定元素中。 url ：請求伺服器的地址 data ：可選項，請求時傳送的資料 callback ：可選項，請求成功後的回撥

jquery mobile在頁面載入時新增載入中效果

<html xmlns="http://www.w3.org/1999/xhtml"> <head > <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

android快速開發框架--快速實現頁面載入中載入失敗無資料等狀態以及下拉重新整理和自動載入

RapidDevelop-Android快速開發框架框架持續更新中這個框架是從平時專案裡用的比較多的框架裡整合而來對本專案感興趣的可以一起研究喜歡的朋友歡迎star 同時也歡迎大家的寶貴意見issues 如果大家對MVP模式的開發網路爬蟲以及快取策略

超簡潔的jquery操作頁面中iframe內的dom元素

$("#iframe1").contents().find("#news_text").html(""); iframe1：頁面中的iframe的ID； news_text：iframe內需要被操作的元素的ID； JS程式碼如下： document.getElem

android:Activity中切換不同狀態頁：載入中，載入失敗，資料頁，空頁面……

現在主流的APP上，一個頁面都會有好幾種顯示狀態，一開始，我是將這些都放在xml中，然後顯示隱藏來實現的，但很麻煩，複用也不方便。介紹一個方法工具，效果如餓了麼，美團外賣等： @

EF 學習系列三資料操作資料載入及EF中執行Sql

1、實體狀態我們通過EF來對資料庫進行操作並持久化到資料庫，那麼EF必然通過EF上下文來維護實體的狀態，明確知道每一個狀態所對應的操作。也就是說EF通過上下文負責跟蹤實體的狀態。EF實體狀態存在名稱空間System.Data.Entity下的EntityState列舉中 1.1、Added Add

JQuery中內容操作函數、validation表單校驗

調用方法 scrip 註意語言 rul asc javascrip 最前面插入獲取 JQuery:內容體拼接（可以直接拼接元素節點和內容節點）　　JQuery實現：　　　　方案1：A.append(B); == B.appendTo(A);A的後面拼接B 　　　

~隨筆B023~jquery獲取json的大小，並在json中為當前頁面迴圈賦值

本程式碼使用情況：　　二次錄入與一次錄入的資料進行實時比對。——controller向前臺傳model,而model中附帶了多個list 　　1.model.addAttribute("currencyModelJson", JSON.toJSONString(currencyModel)); // 用

mysql 操作sql語句操作資料表中的內容/記錄

#3. 操作檔案中的內容/記錄往哪張表去插入 insert into 表名指定欄位(id,name) 插入要加values(針對前面欄位插入)(2,mike);insert into t1(id,name) values(2,'mike'); insert into t1 v

MySQL(四):操作資料表中的記錄

新增記錄語句:INSERT [INTO(可省略)] 表名 [(可省略)列名1,列名2,..] {VALUES | VALUE} (列1的值,列2的值,列3...) 如果不寫列名則預設為所有列新增記錄如果

vue中禁止ios瀏覽器頁面滾動的橡皮筋效果

在iPhone瀏覽器上滾動頁面時，頁面出現了橡皮筋效果 layout.vue <template> <div class="layout"> <header></header> <rou

C 資料結構中單鏈表基本操作

C中的typedef C中的typedef關鍵字作用是為一種資料型別定義一個新名字，這樣做的目的有兩個，一是給變數定義一個易記且意義明確的新名字，如： typedef unsigned char BYTE; 把unsigned char型別自命名為BYTE。另一個目的是

Powershell直接指令碼時出現無法載入檔案因為在此係統中禁止執行指令碼問題的解決方法

在Powershell直接指令碼時會出現：無法載入檔案 ******.ps1，因為在此係統中禁止執行指令碼。有關詳細資訊，請參閱 "get-help about_signing"。所在位置行:1 字元: 17 + E:\Test\test.ps1 <<<< + Cat

jQuery+Ajax+js請求json格式資料並渲染到html頁面

1、先給json格式的資料： [ {"id":1,"name":"stan"}, {"id":2,"name":"jack"}, {"id":3,"name":"lucy"}, {"id":4,"name":"mary"}, {"id":5,"name":"jerry"}, {"id":6,"n

JQuery 資料載入中禁止操作頁面

相關推薦