懶加載

????????也叫延遲加載，指的是在長網(wǎng)頁中延遲加載內(nèi)容或圖像，是一種很好優(yōu)化網(wǎng)頁性能的方式。在滾動屏幕之前，可視化區(qū)域之外的內(nèi)容不會進行加載，在屏幕滾動距離底部到一定距離時才加載。這樣網(wǎng)頁的加載速度更快，減少了服務器的負載。

????????懶加載適用于圖片較多，頁面列表較長（長列表）的場景中。

實現(xiàn)效果：

?可以看見滾動條在距離底部一定的距離時才加載下一屏 且回到頂部時并沒有重新加載

實現(xiàn)過程：

需要的變量：

還需要有個距離底部的距離 這里我給了150 就是想讓滾動條在距離底部的距離小于150時再加載下一屏

?

?然后 寫滾動事件 這里需要js去獲取窗口變化的數(shù)據(jù) 要考慮窗口的大小的影響 在窗口最大和縮放窗口時 分別獲取一下這幾個值 相加或相減找到一個合適且差別不是很大的值 然后通過上面給的距離底部距離去判斷??

最后還有一個問題就是 在刷新或者去了其他頁面再返回時??滾動條會自己記錄滾動的位置? 有時候刷新或回來滾動條就在中間或者下面 感覺有點怪怪的

所以做了個重置滾動條的距離 讓它在刷新或者再回來時都在頂部

拿走！

 // 滾動 頁面懶加載
  scrollChange = () => {
    // 在頁面刷新和重新進入主頁時 將滾動條位置還原為0
    if (this.isFirstLoading) {
      this.isFirstLoading = false;
      document.documentElement.scrollTop = 0;
      return;
    }

    let { scrollState, preScrollTop, scrollIndex } = this.state;
    let scrollTop = document.documentElement.scrollTop;
    let offsetHeight = document.documentElement.offsetHeight;
    let scrollHeight = document.documentElement.scrollHeight;

    // preScrollTop < scrollTop 防止渲染出的下面的部分 再返回上面部分時再次渲染
    if (
      scrollHeight - offsetHeight - scrollTop <= bottomDistance &&
      preScrollTop < scrollTop
    ) {
      ++scrollIndex;
      this.setState({
        scrollIndex,
        preScrollTop: scrollTop    
      });
    }

 
    this.setState({
      scrollTopDis: scrollTop      //這是回到頂部用的 不需要就不用寫了
    });
  };

?然后就是控制頁面加載的部分：

第一屏肯定是要默認加載的? 所以在下面需要懶加載的部分開始 第一次滿足滾動條距離底部150時 加載出來一屏 scrollIndex + 1 ， 第二次再滿足 再顯示一屏?scrollIndex 再加1，依次遞增? 控制顯隱就可以啦

?顯示隱藏用了display：none? 直接封裝在整體樣式里面了 所以這里直接寫hide就可以

?介樣子頁面懶加載就完成鳥~

最后積累個?JS獲取屏幕分辨率 及 窗口尺寸?吧

HTML精確定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 獲取對象的滾動高度。
scrollLeft:設置或獲取位于對象左邊界和窗口中目前可見內(nèi)容的最左端之間的距離
scrollTop:設置或獲取位于對象最頂端和窗口中可見內(nèi)容的最頂端之間的距離
scrollWidth:獲取對象的滾動寬度
offsetHeight:獲取對象相對于版面或由父坐標 offsetParent 屬性指定的父坐標的高度
offsetLeft:獲取對象相對于版面或由 offsetParent 屬性指定的父坐標的計算左側位置
offsetTop:獲取對象相對于版面或由 offsetTop 屬性指定的父坐標的計算頂端位置
event.clientX 相對文檔的水平座標
event.clientY 相對文檔的垂直座標
event.offsetX 相對容器的水平坐標
event.offsetY 相對容器的垂直坐標
document.documentElement.scrollTop 垂直方向滾動的值
event.clientX+document.documentElement.scrollTop 相對文檔的水平座標+垂直方向滾動的量

js document獲取：

(提示下：CSS中的margin屬性，與clientWidth、offsetWidth、clientHeight、offsetHeight均無關)

網(wǎng)頁可見區(qū)域寬：document.documentElement.clientWidth
網(wǎng)頁可見區(qū)域高：document.documentElement.clientHeight
網(wǎng)頁可見區(qū)域寬：document.documentElement.offsetWidth (包括邊線的寬)
網(wǎng)頁可見區(qū)域高：document.documentElement.offsetHeight (包括邊線的寬)
網(wǎng)頁正文全文寬：document.documentElement.scrollWidth
網(wǎng)頁正文全文高：document.documentElement.scrollHeight
網(wǎng)頁滾動的高：document.documentElement.scrollTop
網(wǎng)頁滾動的左：document.documentElement.scrollLeft
網(wǎng)頁正文部分上：window.screenTop
網(wǎng)頁正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的寬：window.screen.width
屏幕可用工作區(qū)高度：window.screen.availHeight
屏幕可用工作區(qū)寬度：window.screen.availWidth

獲取窗口寬度：window.innerWidth
獲取窗口高度：window.innerHeight

IE，F(xiàn)ireFox 差異如下：

IE6.0、FF1.06+：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border

IE5.0/5.5：
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height文章來源地址http://www.zghlxwxcb.cn/news/detail-496141.html

到了這里，關于react結合js獲取屏幕鼠標滾動等距離實現(xiàn)頁面懶加載的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！