對標(biāo)蘋果的靈動島 華為帶來實(shí)況窗功能
繼蘋果的靈動島之后，華為也在今天正式推出了“實(shí)況窗”功能。據(jù)今天鴻蒙OS 4.0的現(xiàn)場演示顯示，華為的實(shí)況窗可以更高效的展現(xiàn)出實(shí)時通知，比如鎖屏上就能看到外賣、打車、銀行
我們可以使用傳統(tǒng)的方式，監(jiān)聽頁面的 scroll 事件，然后調(diào)用目標(biāo)函數(shù)的 getBoundingClientRect 方法，得到目標(biāo)元素在網(wǎng)頁中的位置信息。
但是我并不喜歡監(jiān)聽 scroll 事件。因?yàn)樗麜罅康膱?zhí)行，并且 getBoundingClientRect 是一個同步方法，都在主線程上運(yùn)行，當(dāng)其頻繁執(zhí)行時可能會導(dǎo)致性能出現(xiàn)問題。
我們可以使用另外一種方式來做到同樣的效果。他就是 IntersectionObserver。
var observer = new IntersectionObserver(callback[, option])IntersectionObserver 提供了一種異步觀察目標(biāo)元素與其祖先元素或者頂級文檔 viewport 交叉狀態(tài)的方法。其祖先元素或者視口，被稱為根 root。當(dāng)目標(biāo)元素與根元素在視圖上產(chǎn)生交集時，回調(diào)函數(shù)就會執(zhí)行。
我們也可以在 options 中，自定義配置 root 元素。
let options = { root: document.querySelector("#scrollArea"), rootMargin: "0px", threshold: 1.0,};let observer = new IntersectionObserver(callback, options);options 接受三個參數(shù)。
自定義目標(biāo)元素的根節(jié)點(diǎn)。該節(jié)點(diǎn)必須是目標(biāo)元素的祖先元素。如果未指定，默認(rèn)為視口。
根元素周圍的邊距。其值可以類似于 CSS 的 margin 屬性，例如 10px 20px 30px 40px，以此表示上、右、下、左。這些值夜可以是百分比。在計(jì)算交叉點(diǎn)之前，這組值用于增大或者縮小根元素邊框的每一側(cè)，默認(rèn)為 0。
一個數(shù)字或者一組數(shù)字。表示目標(biāo)可見度達(dá)到多少百分比時，回調(diào)函數(shù)就應(yīng)該執(zhí)行。例如，如果我希望交叉部分每超過目標(biāo)元素 25% 就執(zhí)行，那么我就傳入 [0, 0.25, 0.5, 0.75, 1]. 默認(rèn)值為 0。
創(chuàng)建的實(shí)例有 4 個方法可以讓我們使用。
回調(diào)函數(shù)執(zhí)行時，接收一個參數(shù)，該參數(shù)為回調(diào)函數(shù)提供目標(biāo)對象的位置信息，一共有六個屬性。
{ // 回調(diào)執(zhí)行的時間 time: 3893.92, // 被觀察的目標(biāo)對象 target: element // 根元素位置信息 rootBounds: ClientRect { bottom: 920, height: 1024, left: 0, right: 1024, top: 0, width: 920 }, // 目標(biāo)元素位置信息 boundingClientRect: ClientRect { // ... }, // 交叉區(qū)域矩形的位置大小信息 intersectionRect: ClientRect { // ... }, // 元素可見度比例 intersectionRatio: 0.54,}該參數(shù)返回一個數(shù)組包含一個或者多個元素的位置信息。
在瀏覽器中，展示一張圖片，我們使用的是 img 標(biāo)簽。img 標(biāo)簽有一個必須傳入的屬性 src，當(dāng)我們不傳入 src 時，圖片無法加載，一旦傳入 src，那么圖片就會立即開始加載。
因此，我們需要做的事情就是，當(dāng)圖片沒有出現(xiàn)在可視區(qū)域時，不傳入正確的 src 屬性，當(dāng)通過上述的方法判斷圖片已經(jīng)出現(xiàn)在可視區(qū)域，我們就傳入正確的 src，此時圖片會立即加載。
首先，我們封裝的新組件，一定要繼承原有 img 標(biāo)簽的所有能力。先定義一個 Props 類型聲明，目前我們并不需要擴(kuò)展其他的屬性，暫時先這樣，未來會根據(jù)需求的變動逐漸新增新的屬性值。
interface LazyLoadProps extends DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> { }然后我們我要的事情是，除了 src 屬性，我們要把其他屬性全部直接傳給 img 標(biāo)簽，具體方式如下：
export default function LazyLoad(props: LazyLoadProps) { const {src = '', ...other} = props return ( <img {...other} /> )}然后我們需要定義一個 ref 屬性，用于獲取 img 標(biāo)簽的元素對象。
export default function LazyLoad(props: LazyLoadProps) { const {src = '', ...other} = props const img = useRef(null) return ( <img ref={img} {...other} /> )}準(zhǔn)備工作做好之后，我們最后只需要借助 useEffect 聲明 IntersectionObserver 實(shí)例然后監(jiān)聽圖片元素即可。
export default function LazyLoad(props: LazyLoadProps) { const {src = '', ...other} = props const [URL, setURL] = useState('') const img = useRef(null) useEffect(() => { var io = new IntersectionObserver((entries) => { // @ts-ignore if (entries[0].intersectionRatio > 0) { setURL(src) img.current && io.unobserve(img.current) } }, {}) if (img.current) { io.observe(img.current) } }, []) return ( <img ref={img} src={URL} {...other} /> )}這樣，一個滿足基本要求的圖片懶加載組件就封裝好了。
在我們做首屏優(yōu)化的時候，為了能夠達(dá)到最快的速度渲染頁面，圖片的加載往往也需要延后，但是又不能延后太多。因此此時的問題是，圖片已經(jīng)出現(xiàn)在可視區(qū)域了，我們又應(yīng)該如何做才能做到懶加載呢？
在實(shí)踐中可能還會遇到的需求變動是，給圖片添加一個占位符。然后占位符元素與圖片元素的切換不是立即發(fā)生的，而是要等到我們確保圖片已經(jīng)全部加載完成之后才發(fā)生的，否則的話，可能會出現(xiàn)圖片只加載了一小半的視圖情況。這又應(yīng)該如何實(shí)現(xiàn)
繼續(xù)優(yōu)化。我們希望占位符元素與圖片元素的切換沒那么生硬，而是結(jié)合動畫漸入漸出，又該如何實(shí)現(xiàn)。
繼續(xù)優(yōu)化，我們希望支持傳入 aspectFill 等屬性，確保圖片的縮放比例，不能因?yàn)閷捀叩脑O(shè)置導(dǎo)致圖片比例變形，又該如何實(shí)現(xiàn)
這些思考就留給大家在實(shí)踐中去嘗試驗(yàn)證了。本文就不在詳細(xì)介紹。
本文鏈接：http://www.tebozhan.com/showinfo-26-77981-0.html20行代碼，封裝一個 React 圖片懶加載組件
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： Kotlin的擴(kuò)展（Extension）特性，你了解了嗎？
下一篇： 我們一起解鎖小程序開發(fā)新姿勢
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號