定義

當(dāng)打開一個(gè)有很多圖片的頁(yè)面時(shí)，先只加載頁(yè)面上看到的圖片，等滾動(dòng)到頁(yè)面下面時(shí)，再加載所需的圖片。這就是圖片懶加載。

作用

減少或延遲請(qǐng)求數(shù)，緩解瀏覽器的壓力，增強(qiáng)用戶體驗(yàn)。

實(shí)現(xiàn)方式

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

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

3?.當(dāng)圖片在視野中時(shí)，通過js自動(dòng)改變?cè)搮^(qū)域的圖片的src屬性為真實(shí)地址

代碼部分

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都是浮動(dòng)，如果不清除浮動(dòng)，h1的值高度就相當(dāng)于container里面最高的，不是實(shí)際的數(shù)值*/
</style>V

2.js 部分

  <script>
    start() // 一開始沒有滾動(dòng)，也需要觸發(fā)一次 
    $(window).on('scroll', function(){// 滾動(dòng)時(shí)，顯示對(duì)應(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ū)別圖片是否被加載過，防止重新加載
    }

以上就是動(dòng)力節(jié)點(diǎn)小編介紹的"JS圖片懶加載的實(shí)現(xiàn)原理"，希望對(duì)大家有幫助，想了解更多可查看JavaScript教程。動(dòng)力節(jié)點(diǎn)在線學(xué)習(xí)教程，針對(duì)沒有任何Java基礎(chǔ)的讀者學(xué)習(xí),讓你從入門到精通,主要介紹了一些Java基礎(chǔ)的核心知識(shí)，讓同學(xué)們更好更方便的學(xué)習(xí)和了解Java編程，感興趣的同學(xué)可以關(guān)注一下。