img 的data-src 屬性及懶加載

1、什麼是圖片懶加載

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

通俗一點：
一、就是建立一個自定義屬性data-src存放真正須要顯示的圖片路徑，而img自帶的src放一張大小爲1 * 1px的圖片路徑。
二、當頁面滾動直至此圖片出如今可視區域時，用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>

 

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，元素浮動，必須清除。