前端內容佔位技術分享

2021-10-08 21:55:13 字數 602 閱讀 2910

所謂內容佔位技術,意思是說在內容比較多,資料量大的情況下,可以事先將一些標籤替代它們的位置,等到載入完畢的時候再將其隱藏。注意這和以前的懶載入不是乙個意思,兩個不起衝突,懶載入的原理就是事先用乙個較小的loading,等使用者到達這個位置的高度時再去獲取相應的資料。內容佔位技術就是模擬它可能會顯示出來的樣子。

比如下面這個頁面,不好意思打了馬賽克

再還沒有載入內容出來時,我們可以這樣。

因為是gif的,效果並不是特別好,直接把上面**拷貝到你的檔案裡面開啟。這裡只做了一部分(量寬高太麻煩了)

其中**

**的原理其實很簡單,就是用乙個大盒子把裡面的子盒子包起來,這個大盒子的作用就是那個閃爍效果以及預設背景顏色,其他子標籤的作用就是把不是內容的用白色蓋住預設背景。

恭喜你看完了,能看下來也是不錯的。

前端內容佔位技術分享

所謂內容佔位技術,意思是說在內容比較多,資料量大的情況下,可以事先將一些標籤替代它們的位置,等到載入完畢的時候再將其隱藏。注意這和以前的懶載入不是乙個意思,兩個不起衝突,懶載入的原理就是事先用乙個較小的loading,等使用者到達這個位置的高度時再去獲取相應的資料。內容佔位技術就是模擬它可能會顯示出...

《論道HTML5》內容技術分享活動

html5小組的第12次活動,本期沙龍圍繞5月出版的 論道html5 重點章節內容展開,由我和另外一位作者 秀野堂主現場分享。東直門南大街3號國華投資大廈11層1105室 thoughtworks北京辦公室 地圖 路線 地鐵2號線東直門站d西南口出 主題 本期沙龍圍繞小組5月出版的第一本本土html...

學習內容分享

一 求 兩個數 30.30 和 40 的最大值?public class ex0031 system.out.println 最大值是 max 二 判斷公元1988年是否為閏年?可被4整除 但不可被100整除 為閏年,但是正百的年數必須是可以被400整除的才是閏年 public class ex00...