第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

異步接口渲染模板引起的頁面抖動

異步接口渲染模板引起的頁面抖動

慕姐4208626 2018-09-14 20:09:03
目前在做pc端的項目,后端只提供接口,前端來渲染頁面。在頁面塞了一些空容器(容器并沒有任何樣式,沒有高度),每個接口對應(yīng)的模塊,都有相應(yīng)的容器。每個接口響應(yīng)的時間不同,當(dāng)模板拿到異步請求后的數(shù)據(jù)并綁定數(shù)據(jù),轉(zhuǎn)化成HTML片斷,把它們?nèi)巾撁鎸?yīng)容器中時,就會產(chǎn)生頁面抖動現(xiàn)象。原因就在于每個接口響應(yīng)的時間不一致,而頁面模塊顯示有先后順序,后者可能會在前者渲染之前出現(xiàn),這樣就造成了抖動。比如: 頁面模塊應(yīng)當(dāng)是A1、B2從上到下的顯示順序,但是B2模塊的接口響應(yīng)比A1快,于是可以看到B2模塊先出來了,緊接著A1也出來了,這樣就把B2給擠了下去。對此,有什么好的解決方案嗎?promise方案會有阻塞
查看完整描述

1 回答

?
侃侃無極

TA貢獻(xiàn)2051條經(jīng)驗 獲得超10個贊

比較好的辦法就是頁面里就已經(jīng)知道A1、A2兩個模塊的高度,預(yù)留空間給A1。
通常來說除了列表外,大部分模塊都是固定大小的,可以在CSS或者HTML中就把大小預(yù)置。
對于不能確定大小的模塊,也可以采用動畫的方式展示,比如A1載入完成顯示時,A1顯示成逐漸展開,逐漸把B2頂下去,形成一種動畫過渡。

查看完整回答
反對 回復(fù) 2018-10-02
  • 1 回答
  • 0 關(guān)注
  • 789 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號