㈠ react 里 loading 寫在哪個生命周期里
說說React
一個組件，有自己的結構，有自己的邏輯，有自己的樣式，會依賴一些資源，會依賴某些其他組件。比如日常寫一個組件，比較常規的方式：
－ 通過前端模板引擎定義結構
－ JS文件中寫自己的邏輯
－ CSS中寫組件的樣式
－ 通過RequireJS、SeaJS這樣的庫來解決模塊之間的相互依賴，
那麼在React中是什麼樣子呢？
結構和邏輯
在React的世界裡，結構和邏輯交由JSX文件組織，React將模板內嵌到邏輯內部，實現了一個JS代碼和HTML混合的JSX。
結構
在JSX文件中，可以直接通過 React.createClass 來定義組件：
var CustomComponent = React.creatClass({
render: function(){
return ();
}
});
通過這種方式可以很方便的定義一個組件，組件的結構定義在render函數中，但這並不是簡單的模板引擎，我們可以通過js方便、直觀的操控組件結構，比如我想給組件增加幾個節點：
var CustomComponent = React.creatClass({
render: function(){
var $nodes = ['h','e','l','l','o'].map(function(str){
return ({str});
});
return ({$nodes});
}
});
通過這種方式，React使得組件擁有靈活的結構。那麼React又是如何處理邏輯的呢？
邏輯
寫過前端組件的人都知道，組件通常首先需要相應自身DOM事件，做一些處理。必要時候還需要暴露一些外部介面，那麼React組件要怎麼做到這兩點呢？
事件響應
比如我有個按鈕組件，點擊之後需要做一些處理邏輯，那麼React組件大致上長這樣：
var ButtonComponent = React.createClass({
render: function(){
return (屠龍寶刀，點擊就送);
}
});
點擊按鈕應當觸發相應地邏輯，一種比較直觀的方式就是給button綁定一個 onclick 事件，裡面就是需要執行的邏輯了：
function getDragonKillingSword() {
//送寶刀
}
var ButtonComponent = React.createClass({
render: function(){
return (屠龍寶刀，點擊就送);
}
});
但事實上 getDragonKillingSword() 的邏輯屬於組件內部行為，顯然應當包裝在組件內部，於是在React中就可以這么寫：
var ButtonComponent = React.createClass({
getDragonKillingSword: function(){
//送寶刀
},
render: function(){
return (屠龍寶刀，點擊就送);
}
});
這樣就實現內部事件的響應了，那如果需要暴露介面怎麼辦呢？
暴露介面
事實上現在 getDragonKillingSword 已經是一個介面了，如果有一個父組件，想要調用這個介面怎麼辦呢？
父組件大概長這樣：
var ImDaddyComponent = React.createClass({
render: function(){
return (
//其他組件
//其他組件
);
}
});
那麼如果想手動調用組件的方法，首先在ButtonComponent上設置一個 ref="" 屬性來標記一下，比如這里把子組件設置成 ，那麼在父組件的邏輯里，就可以在父組件自己的方法中通過這種方式來調用介面方法：
this.refs.getSwordButton.getDragonKillingSword();
看起來屌屌噠~那麼問題又來了，父組件希望自己能夠按鈕點擊時調用的方法，那該怎麼辦呢？
配置參數
父組件可以直接將需要執行的函數傳遞給子組件：
然後在子組件中調用父組件方法：
var ButtonComponent = React.createClass({
render: function(){
return (屠龍寶刀，點擊就送);
}
});
子組件通過 this.props 能夠獲取在父組件創建子組件時傳入的任何參數，因此 this.props 也常被當做配置參數來使用
屠龍寶刀每個人只能領取一把，按鈕點擊一下就應該灰掉，應當在子組件中增加一個是否點擊過的狀態，這又應當處理呢？
組件狀態
在React中，每個組件都有自己的狀態，可以在自身的方法中通過 this.state 取到，而初始狀態則通過 getInitialState() 方法來定義，比如這個屠龍寶刀按鈕組件，它的初始狀態應該是沒有點擊過，所以 getInitialState 方法裡面應當定義初始狀態 clicked: false 。而在點擊執行的方法中，應當修改這個狀態值為 click: true ：
var ButtonComponent = React.createClass({
getInitialState: function(){
//確定初始狀態
return {
clicked: false
};
},
getDragonKillingSword: function(){
//送寶刀
//修改點擊狀態
this.setState({
clicked: true
});
},
render: function(){
return (屠龍寶刀，點擊就送);
}
});
這樣點擊狀態的維護就完成了，那麼render函數中也應當根據狀態來維護節點的樣式，比如這里將按鈕設置為 disabled ，那麼render函數就要添加相應的判斷邏輯：
render: function(){
var clicked = this.state.clicked;
if(clicked)
return (屠龍寶刀，點擊就送);
else
return (屠龍寶刀，點擊就送);
}
小節
這里簡單介紹了通過JSX來管理組件的結構和邏輯，事實上React給組件還定義了很多方法，以及組件自身的生命周期，這些都使得組件的邏輯處理更加強大
資源載入
CSS文件定義了組件的樣式，現在的模塊載入器通常都能夠載入CSS文件，如果不能一般也提供了相應的插件。事實上CSS、圖片可以看做是一種資源，因為載入過來後一般不需要做什麼處理。
React對這一方面並沒有做特別的處理，雖然它提供了Inline
Style的方式把CSS寫在JSX裡面，但估計沒有多少人會去嘗試，畢竟現在CSS樣式已經不再只是簡單的CSS文件了，通常都會去用Less、
Sass等預處理，然後再用像postcss、myth、autoprefixer、cssmin等等後處理。資源載入一般也就簡單粗暴地使用模塊載入器
完成了
組件依賴
組件依賴的處理一般分為兩個部分：組件載入和組件使用
組件載入
React沒有提供相關的組件載入方法，依舊需要通過
㈡ jQuery mobile之loading的問題 小白求助大神
回答：你那鏈接要在a標簽中加上data-ajax=false
jquery mobile 垃圾的東西，千萬別用它，我用它搞死了：
1、前端用它和頁面的風格不統一，這貨單獨拿出一個比如按鈕什麼的樣式挺好的，放到項目中總是怪怪的。
2、js默認ajax，總出現一些默名的問題。
3、CSS樣式修改麻煩，要在當前標簽覆蓋才生效。
4、載入太多。
忠告：寧可麻煩點自已寫也不要圖省事用這破玩意。
參考：http://www.w3school.com.cn/jquerymobile/jquerymobile_ref_data.asp
㈢ front-end loading是什麼意思
ront-end loading
英[ˈfrʌntˌend ˈləʊdɪŋ]
美[ˈfrʌntˌɛnd ˈlodɪŋ]
[釋義] 期初加重收費;
例句
A projecting forward part, such as the front end of a ski.
前端的突出部分向前突出的前端，比如滑雪板的前端
The Tundra's front end has been mildly reworked.
騰華的前端已輕度返工。
㈣ APP中的6種常見數據載入
1.
全屏載入
全屏載入也叫白屏載入，就是整個屏幕白屏進行數據載入，一般會有菊花轉或進度條配合，常用於手機網頁的載入中，例如列表頁進入詳情頁，圖片詳情等。（可考慮融入趣味性較強的小動畫，增強愉悅感，從用戶心理上去縮短等待時間。
優點：能保證內容的整體性，全部載入完才能夠系統化的閱讀。
缺點：有非常強烈的等待感，3s以上會產生焦躁情緒，所以在地鐵等信號 不好的地方，使用手機網 頁獲取內容實在是比較災難的一件事情。
2.分布載入
分布載入就是分步驟的載入網頁，優先載入占網路資源較小的元素，包括優先載入，懶載入，預載入，漸進載入。
a.優先載入
如果一個頁面有圖片有文字，可以先把文字都載入出來，保證用戶可以有內容可讀，然後再載入比較費流量的圖片。但是活動頁什麼的，千萬不能把重要信息全部放在圖片上，導致載入不出來。這種載入形式更加適用於內容閱讀型的APP。
懶載入主要是針對前端頁面比較大而設計出來的一種方式，假如一個網頁很大，又含有很多圖片、視頻內容，那麼想一次性載入就會等待很久，懶載入就是只有在屏幕顯示範圍內的資源，被用戶看到的內容才會真正去載入。
預載入就是提前載入，比如啟動APP時，當顯示啟動畫面時，就可以預先把首頁內容載入出來，這樣可以減少用戶載入內容時的等待時間，還有一個很典型的使用場景就是瀏覽視頻網站或者購物網站，當我們快要滑到頁面底部時，下面圖片已經幾乎載入完成了，這就是預載入的好處，在使用上感覺更加流暢。
漸進載入
在 PC 端用瀏覽器看圖片的時候，經常是先看到一張模糊圖，然後再漸漸的變得清晰，這種效果就叫做漸進式載入。
優點：可以幫助用戶快速閱讀內容，了解信息。
缺點：也許會丟失掉重要的關鍵信息，無法建立信息獲取的閉環。
3.整頁載入
當當前頁與下一頁是整頁切換的時候，可以考慮採用整頁載入的形式，但是要保證每個頁面的數據量不是特別的大。一般適用於宮格圖片模式、全屏圖片模式、網狀詳情頁模式。
優點：能保證每個頁面的完整性，體驗比較整體。
缺點：不好保證整頁的載入效率，且有可能影響瀏覽的流暢度。
4.自動載入
當你瀏覽信息時，不停的向上滑動，新的內容會不停的從底部出現，這種方式稱為自動載入。關於自動載入，要注意每次載入多少條內容，或者多少屏的內容，我無聊的數了數今日頭條每次會自動載入60條新聞。
優點：把用戶代入無盡瀏覽模式，讓用戶一直向下滾動，不需要手動點擊下一頁。
缺點：沒有盡頭，容易迷失，不方便快速索引定位到某個內容。
5.智能載入
這個載入模式我經常使用到，假如是在WIFI情況下，使用QQ瀏覽器去看視頻，那麼它會自動載入視頻播放，而使用4G的流量去訪問視頻頁面的話，會有一個彈窗來確認是否要播放，以免耗費大量流量造成用戶扣費。智能載入模式就是根據用戶使用場景來改變載入形式的。
例如今日頭條在WiFi模式下，圖片大圖展示，當處於非WiFi模式下時，展示小縮略圖，當用戶覺得某張圖有足夠的吸引力時，點擊小縮略圖載入大圖，幫助用 戶節省流量。再比如愛奇藝在非WiFi的模式下播放視頻時，會提示用戶繼續播放會產生流量費用，這類設計就比較人性化，也容易讓用戶產生好感，建戶忠誠 度。（用戶知道你是在為他著想，畢竟流量還是挺貴的！）
優點：根據具體場景來控制流量和載入速度。
缺點：不一定真實有效的命中用戶需求，所以還是需要給予用戶一定的查看詳情的入口，或者是設置項。
6.離線載入
當用戶沒網的時候，往往很多功能都不能用了，內容也無法載入出來，導致APP變得根本不可用，這時候就要考慮預載入 離線緩存的設計了。首先在有網 的時候把數據提前載入下來，緩存到本地，當沒網的時候，直接載入已經緩存下來的內容。一般會提供給用戶選擇，是否開啟有WiFi的情況下預載入功能，或者 是否開始WiFi下全部離線緩存的功能。這樣便可在一定程度上減少地鐵上信號時好時差而無法正常使用產品所帶來的困擾了。但考慮到手機空間，要設計合適的離線機制。並配合一定的清理緩存的機制。適用於小說閱讀、新聞閱讀、視頻類APP。
優點：解決了沒網獲取數據的問題，且節約了流量，保證了流暢。
缺點：佔用本地存儲空間，而且有時候預載入的內容根本沒有用到。
三、4種減少等待感的設計
1.使用模態載入
盡量使用非模態的載入方式，在載入的過程不打斷用戶，不需要等待載入完就可以做別的事情的，而不用傻傻等待數據載入完成，大大降低了等待的焦躁感，提升用戶體驗流暢度。
模態載入：app在觸發載入後，出現模態提示層，防止用戶在載入過程中進行其他操作，導致當前載入出錯。如果採用模態載入，會因為網路原因或內容過多導致長時間處於載入狀態，建議提供一個「取消」的操作。同時在安卓中的後退按鈕能關閉模態提示。
2. 情感化的載入動畫
用戶等待載入的過程是相當痛苦的，因為他迫切的想看到頁面內容，通過設計一些呆萌可愛的載入動畫，讓用戶在等待的過程中享受動畫的愉悅感，讓產品情感化，在心理層面上去減少用戶的急躁感。
3.
進度條載入
如果是時間較長的載入過程，最好能清晰的告知過程進度，讓用戶有更加明確的知情權，和載入的時間預期。一個非常經典的體驗設問，同樣是3s的載入時 間，勻速的進度條、先慢後快的進度條、先快後慢的進度條，哪個讓用戶感覺上最快?經過科學的實驗證實，先慢後快的進度條是讓用戶心理感受上最快的設計。這是因為用戶最容易記住最後一瞬間的感覺，如果最後一瞬間，感知到了快，就覺得順暢了。
4.
盡量提前載入
盡可能的利用預載入或有WiFi的情況下離線緩存的方式，把內容提前載入下來，這樣能做到最大限度的降低載入給用戶帶來的卡頓感。如果能判斷出來用戶下一步要做的事情，提前幫用戶載入相應的內容，肯定是最符合需求場景的事情。當我開始讀第一頁的時候，第二頁第三頁就開始陸續緩存下來了
5.啟動頁載入
這個主要是APP啟動時的一個頁面，由於APP啟動需要時間，因此可以加入一個啟動頁來自然過渡，而且很多啟動頁是廣告，這樣也可以帶來一些收益，這個頁面一般可以點擊跳過。
移動互聯網的場景多種多樣，我們在設計的時候需要考慮各種各樣的場景，例如WiFi下、非WiFi下、無網路、又或者說電梯里、地鐵上等等。但是咋們的目的也只有一個：優化用戶體驗，提高商業價值。所以無論設計什麼功能模塊都應該多考慮一下用戶的使用場景。
如何降低用戶的焦慮感？
由於存在網速不快，網路異常，伺服器異常等情況，讓用戶等待的情況是必不可少的。但是我們都知道，等待會產生焦慮感，分分鍾讓用戶卸載你的產品，那麼我們可以通過哪些手段來降低或緩解用戶的焦慮感？
第一：優化App的載入演算法，使得App與伺服器數據傳輸的時間減短。 這個需要開發人員的精益求精了。這個是從根本上解決了問題，因為直接減少了載入數據的時間，也就減少了用戶需要等待的時間。
第二：採用預載入和智能載入的方式。 拿閱讀App打比方，當用戶在看第一頁的時候，App在後台載入完後面的幾頁，等用戶翻到第二頁的時候就不需要等待載入了，因為App已經幫用戶提前載入好了。這種載入機制對用戶體驗特別好，但是存在一個問題，就是要預測用戶行為，載入其他數據，這樣會消耗不少流量，所以建議在WiFi網路環境下採取這種預載入機制，而在蜂窩網路狀態下則不採用預載入機制。這個要和開發人員討論溝通，確保預載入機制完美運行。
第三：非同步處理。 這一點做得好的App莫過於Instagram，不知道你有沒有發現，用Instagram的時候會覺得特別流暢，即使在網路不好的情況下。這是為什麼？因為在網路不好的情況下，你給好友點了贊，Instagram並不會提示你網路不好，操作失敗，而是提示你點贊成功了，其實它只是將你點贊的操作記錄了下來，等網路一好就將點贊的行為上傳到伺服器，從而完成點贊行為。這就是讓產品自己去解決問題，而不是把問題拋給用戶。
第四：設計有趣的loading動畫，如上文介紹的美團APP奔跑的小人，這是提升產品情感的重要手段。
㈤ vtloading之後就錯誤
系統bug。vloading是一款前端學習軟體，該軟體在運行時如果一直出現錯誤字樣，是系統bug的原因，只需要將該軟體卸載重新打開即可。
㈥ 前端 loading載入，怎麼做
onload事件是網頁所有內容載入完後激活。 那麼如果你做loading效果。
只能用它去處理了。 做個loading的div 最onload事件里隱藏它。
㈦ 後端實時生成圖片，前端VUE如何獲取並展示
用blob的方式獲取後端實時生成的圖片，在圖片生成之後再顯示，生成中載入loading
getBlobPic(works){
axios({
method:"get",
url:'/api/competition/my-works-basecert?works_id=' + works.id,
responseType:'blob'
}).then((response)=>{
if(response.status===200){
const {data,headers}=response
const blob=new Blob([data],{ type:headers['content-type'] })
this.certificateImg=window.URL.createObjectURL(blob)
this.certificateloading=false;
}else{
this.certificateloading=false;
}
}).catch((error)=>{
this.certificateloading=false;
})
}
㈧ 前端介面loading是統一寫還是分別寫
統一寫。前端介面loading編程中的一個前提，是為了保證後端不會影響編程的運行，分開寫的話後端有的編程就會運行不了，因此是需要統一寫的。就是按照項目的介面文檔所定義的介面，只要涉及到輸入和輸出的數據集合的，就是介面。