怎么用JS實現(xiàn)圖片懶加載

這篇“怎么用JS實現(xiàn)圖片懶加載”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“怎么用JS實現(xiàn)圖片懶加載”文章吧。

定義

當打開一個有很多圖片的頁面時，先只加載頁面上看到的圖片，等滾動到頁面下面時，再加載所需的圖片。這就是圖片懶加載。

作用

減少或延遲請求數(shù)，緩解瀏覽器的壓力，增強用戶體驗。

實現(xiàn)方式

1.設(shè)置圖片src屬性為同一張圖片，同時自定義一個data-src屬性來存儲圖片的真實地址

2. 頁面初始化顯示的時候或者瀏覽器發(fā)生滾動的時候判斷圖片是否在視野中

3?.當圖片在視野中時，通過js自動改變該區(qū)域的圖片的src屬性為真實地址

代碼部分

1.html部分

  <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="20" data-src="http://cdn.jirengu.com/book.jirengu.com/img/20.jpg">
  </div><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里面最高的，不是實際的數(shù)值*/</style>V

2.js 部分

  <script>
    start() // 一開始沒有滾動，也需要觸發(fā)一次 
    $(window).on('scroll', function(){// 滾動時，顯示對應(yīng)圖片
      start()
    })    function start(){
      $('.container img').not('[data-isLoaded]').each(function(){        var $node = $(this)        if( isShow($node) ){
          loadImg($node)
        }
      })
    }    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) // 區(qū)別圖片是否被加載過，防止重新加載
    }

以上就是關(guān)于“怎么用JS實現(xiàn)圖片懶加載”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。