img 的data-src 屬性及懶加載

一、什么是圖片懶加載

當訪問一個頁面的時候，先把img元素或是其他元素的背景圖片路徑替換成一張大小為1*1px圖片的路徑（這樣就只需請求一次），當圖片出現在瀏覽器的可視區域內時，才設置圖片真正的路徑，讓圖片顯示出來。這就是圖片懶加載。

通俗一點：
1、就是創建一個自定義屬性data-src存放真正需要顯示的圖片路徑，而img自帶的src放一張大小為1 * 1px的圖片路徑。
2、當頁面滾動直至此圖片出現在可視區域時，用js取到該圖片的data-src的值賦給src。
ps：自定義屬性可以取任何名字

---

HTML:

html.png

CSS:

<style>
 .container {
  max-width: 800px;
  margin: 0 auto;
}
.container:after{
  content: '';
  display: block;
  clear: both;
}
.container img {
  float: left;
  width: 50%;
}
h1{
  clear: both;
}
 </style>

 

二、需要了解的問題

1、如何加載圖片？
2、如何判斷一個元素出現在視野中？

• 如何加載圖片
  只需要把data-src中的地址放到src的里面就好了

代碼：

function loadImg($img){
//.attr(值)
//.attr(屬性名稱,值)
$img.attr('src', $img.attr('data-src')) //把data-src的值 賦值給src
$img.attr('data-isLoaded', 1) //已加載過的圖片做標記
}

 

結果如下：

地址更換.png

• 如何判斷一個元素出現在視野中？
  元素相對頂點的距離(文字) <= 窗口高度 + 滾動的距離

代碼：

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

 

如圖：

判斷一個元素出現在視野中.png

原理.png

---

js：

start()
$(window).on('scroll', function(){
 start()
})

function start(){
  //.not('[data-isLoaded]')選中已加載的圖片不需要重新加載
 $('.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){
//.attr(值)
//.attr(屬性名稱,值)
$img.attr('src', $img.attr('data-src')) //把data-src的值 賦值給src
$img.attr('data-isLoaded', 1)//已加載的圖片做標記
}

</script>

 

---

注:記得引用jQuery，元素浮動，必須清除。