成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

判斷元素是否在可視區(qū)域

Cristalven / 3548人閱讀

摘要：如果要實現(xiàn)圖片懶加載需要去判斷圖片是否在可視區(qū)域。判斷方法判斷一個元素是否在可視區(qū)域，我們有通常有兩種辦法，第一種是使用元素的屬性的值和頁面的進行對比如果的值小于表示元素在可視區(qū)域內(nèi)。

前言

圖片懶加載在網(wǎng)站運用圖片比較多的時候回用到，圖片懶加載可以讓不在可視區(qū)域的圖片不去加載，避免一次性加載過多圖片導致請求阻塞，提高網(wǎng)站加載速度和用戶體驗。如果要實現(xiàn)圖片懶加載需要去判斷圖片是否在可視區(qū)域。

判斷方法

判斷一個元素是否在可視區(qū)域，我們有通常有兩種辦法，第一種是：使用元素的 getBoundingClientRect 屬性的 top 值和頁面的 clientHeight進行對比, 如果top的值小于 clientHeight表示元素在可視區(qū)域內(nèi)。這種方式的缺點是需要監(jiān)聽scroll事件，第二種是利用高級特性 Intersection Observer 來判斷元素是否可見，這種方式不用監(jiān)聽scroll事件，元素可見變調(diào)用回調(diào)，在回調(diào)里面處理。

getBoundingClientRect

用法： rectObject = object.getBoundingClientRect()

返回一組用于描述元素的只讀屬性-left, top,right,botton, width, height,除了width和height外的屬性都是相當于于視口左上角而言的。bottom和right于正常的有所不同

當計算邊界矩形時，會考慮視口區(qū)域（或其他可滾動元素）內(nèi)的滾動操作，也就是說，當滾動位置發(fā)生了改變，top和left屬性值就會隨之立即發(fā)生變化（因此，它們的值是相對于視口的，而不是絕對的）。如果你需要獲得相對于整個網(wǎng)頁左上角定位的屬性值，那么只要給top、left屬性值加上當前的滾動位置（通過window.scrollX和window.scrollY），這樣就可以獲取與當前的滾動位置無關(guān)的值。

為了跨瀏覽器兼容，請使用 window.pageXOffset 和 window.pageYOffset 代替 window.scrollX 和 window.scrollY。不能訪問這些屬性的腳本可以使用下面的代碼：

// For scrollX
(((t = document.documentElement) || (t = document.body.parentNode))
  && typeof t.scrollLeft == "number" ? t : document.body).scrollLeft
// For scrollY
(((t = document.documentElement) || (t = document.body.parentNode))
  && typeof t.scrollTop == "number" ? t : document.body).scrollTop
Intersection Observer

用法：

參考：https://juejin.im/post/5bbc60...

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/98379.html

相關(guān)文章

  • 如何判斷元素是否在可視區(qū)域ViewPort

    摘要：在這里一次性做個總結(jié)，以用來判斷元素是否在可視區(qū)域以及用原生簡單實現(xiàn)懶加載。被隱藏在內(nèi)容區(qū)域左側(cè)的像素數(shù)。比如上篇文章文字跑馬燈項目中的使用戳此跳轉(zhuǎn)小結(jié)只讀屬性，不包括滾動條。 個性簽名: 生如夏花，逝如冬雪；人生如此，何悔何怨。 前言: 經(jīng)常需要計算元素的大小或者所在頁面的位置,offsetWidth，clientWidth，scrollWidth,scrollTop這幾個關(guān)鍵字的出...

    jayzou 評論0 收藏0

  • 如何判斷元素是否在可視區(qū)域ViewPort

    摘要：在這里一次性做個總結(jié)，以用來判斷元素是否在可視區(qū)域以及用原生簡單實現(xiàn)懶加載。被隱藏在內(nèi)容區(qū)域左側(cè)的像素數(shù)。比如上篇文章文字跑馬燈項目中的使用戳此跳轉(zhuǎn)小結(jié)只讀屬性，不包括滾動條。 個性簽名: 生如夏花，逝如冬雪；人生如此，何悔何怨。 前言: 經(jīng)常需要計算元素的大小或者所在頁面的位置,offsetWidth，clientWidth，scrollWidth,scrollTop這幾個關(guān)鍵字的出...

    xiguadada 評論0 收藏0

  • 如何判斷元素是否在可視區(qū)域ViewPort

    摘要：在這里一次性做個總結(jié)，以用來判斷元素是否在可視區(qū)域以及用原生簡單實現(xiàn)懶加載。被隱藏在內(nèi)容區(qū)域左側(cè)的像素數(shù)。比如上篇文章文字跑馬燈項目中的使用戳此跳轉(zhuǎn)小結(jié)只讀屬性，不包括滾動條。 個性簽名: 生如夏花，逝如冬雪；人生如此，何悔何怨。 前言: 經(jīng)常需要計算元素的大小或者所在頁面的位置,offsetWidth，clientWidth，scrollWidth,scrollTop這幾個關(guān)鍵字的出...

    zhigoo 評論0 收藏0

  • 圖片加載相關(guān)技術(shù)

    摘要：本小節(jié)將討論與圖片加載時機相關(guān)的技術(shù)預加載與懶加載。同樣，可將請求成功與失敗的回調(diào)，作為圖片預加載成功與失敗的處理。 目前，出于性能與靈活性方面的考慮，我們都將一些小圖片替換成矢量圖或者字體。除了這些能被替換的小圖之外，還有一些不得不使用位圖的場景，如照片、背景等。對于這些位圖，我們需要考慮它們在加載過程中的不同狀態(tài)，而制定不同的表現(xiàn)方案。 圖片加載過程中的狀態(tài)，大致包括： 何時決定...

    ZweiZhao 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<