判斷元素是否在可視區域

Cristalven 發布于2019-08-23 12:21 / 3538人閱讀

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

前言

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

判斷方法

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

getBoundingClientRect

用法： rectObject = object.getBoundingClientRect()

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

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

為了跨瀏覽器兼容，請使用 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...

GPU云服務器云服務器判斷可視區域可視區域 html可視區域區域可視化

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98379.html

如何判斷元素是否在可視區域ViewPort

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

jayzou 2019-08-23 13:43 評論0 收藏0
如何判斷元素是否在可視區域ViewPort

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

xiguadada 2019-08-02 12:06 評論0 收藏0
如何判斷元素是否在可視區域ViewPort

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

zhigoo 2019-08-29 17:24 評論0 收藏0
圖片加載相關技術

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

ZweiZhao 2019-08-20 14:47 評論0 收藏0