元素滾動高度和圖片懶加載

時間 2019-12-09

標籤元素滾動高度圖片加載简体版

原文原文鏈接

1、轉載內容

首先轉載兩篇文章
JS中height、clientHeight、scrollHeight、offsetHeight區別
 關於scrollTop,offsetTop,scrollLeft,offsetLeft用法介紹html

2、clientHeight和offsetHeightnode

頁面body的clientWidth和height是不加border的值，要包括padding的值
jquery

頁面body的offsetWidth和height是加border的值，要包括padding的值
服務器

舉個例子
在頁面控制檯輸入document.body.clientHeight 和document.body.offsetHeight 函數

發現二者數值相同，由於body沒有加border。當我給body加上10px的border，clientHeight就少了20px
post

2、元素滾動高度

當一個元素的內容多，高度超出他所在的容器高度，會出現滾動條性能

一、element.scrollHeight 元素滾動內容的總長度學習

element.scrollHeight 元素滾動內容的總長度。若是元素沒出現滾動條， scrollHeight等於 clientHeightthis

二、element.scrollTop 滾動的高度
元素滾動的距離spa

三、window.innerHeight 窗口的高度

3、圖片懶加載

我只想寫一點筆記，方便本身記憶，這篇文章乾貨較少。若是想學習懶加載的朋友，建議直接觀看這篇文章實現圖片懶加載(Lazyload)，這篇文章寫得很好，

懶加載主要是使用於圖片比較多的狀況，一次性加載全部的圖片會給服務器比較大的壓力，加載比較慢，因此咱們先不加載未出如今頁面可視區域內的圖片，等到滾動到可視區域後再去加載。這樣子對於頁面加載性能上會有很大的提高，也提升了用戶體驗。

懶加載主要有3個步驟：
一、把全部圖片的src值換成另一張圖片的src值，把真正的src值放在data-src內
二、判斷元素是否從下方出如今可區域，$(node).offset().top<=$(window).height() + $(window).scrollTop()

滾動時offset的值，offset().top爲元素距離頁面內容的高度

三、把圖片data-src換成src值

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container {
      max-width: 800px;
      margin: 0 auto;
    }
    .container:after{
      content: '';
      display: block;
      clear: both;
    }
    .container img {
      float: left;
      width: 50%;
    }
    h1{
      clear: both;
    } 
    /* 由於img都是浮動，若是不清除浮動，h1的值高度就至關於container裏面最高的，不是實際的數值 */
      </style>
    </head>
    <body>
      <div class="container">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="1" data-src="http://cdn.jirengu.com/book.jirengu.com/img/1.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="2" data-src="http://cdn.jirengu.com/book.jirengu.com/img/2.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="3" data-src="http://cdn.jirengu.com/book.jirengu.com/img/3.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="4" data-src="http://cdn.jirengu.com/book.jirengu.com/img/4.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="5" data-src="http://cdn.jirengu.com/book.jirengu.com/img/5.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="6" data-src="http://cdn.jirengu.com/book.jirengu.com/img/6.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="7" data-src="http://cdn.jirengu.com/book.jirengu.com/img/7.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="8" data-src="http://cdn.jirengu.com/book.jirengu.com/img/8.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="9" data-src="http://cdn.jirengu.com/book.jirengu.com/img/9.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="10" data-src="http://cdn.jirengu.com/book.jirengu.com/img/10.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="11" data-src="http://cdn.jirengu.com/book.jirengu.com/img/11.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="12" data-src="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="13" data-src="http://cdn.jirengu.com/book.jirengu.com/img/13.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="14" data-src="http://cdn.jirengu.com/book.jirengu.com/img/14.jpg">
    <h1 id="target">hello</h1>
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="15" data-src="http://cdn.jirengu.com/book.jirengu.com/img/15.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="16" data-src="http://cdn.jirengu.com/book.jirengu.com/img/16.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="17" data-src="http://cdn.jirengu.com/book.jirengu.com/img/17.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="18" data-src="http://cdn.jirengu.com/book.jirengu.com/img/18.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="19" data-src="http://cdn.jirengu.com/book.jirengu.com/img/19.jpg">
    <img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="20" data-src="http://cdn.jirengu.com/book.jirengu.com/img/20.jpg">
    
    
      </div>
      <script>
    start()
    /* 一開始沒有滾動，也須要觸發一次 */
    $(window).on('scroll', function(){
      start()
    })

    function start(){
      $('.container img').not('[data-isLoaded]').each(function(){
        var $node = $(this)
        if( isShow($node) ){
          loadImg($node)
         /* setTimeout(loadImg($node),300)能夠不作函數節流，懶加載原本就是爲了提升響應速度的 */
        }
      })
    }


    function isShow($node){
      return $node.offset().top <= $(window).height() + $(window).scrollTop()
    }

    function loadImg($img){
      $img.attr('src', $img.attr('data-src'))
      $img.attr('data-isLoaded', 1)
      /*用於區別圖片是否被加載過，防止從新加載*/
    }

  </script>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。