頁面圖片懶加載

1、頁面滾動加載圖片的理解

當一個網頁含有大量的圖片的時候，每每在打開頁面的加載的很慢，如如今的大型電商、新聞、微博等，若是一下加載整個網頁的全部圖片，那會是一個緩慢的過程，要想快速的瀏覽網頁，咱們這時候就須要用到了在滾動或滑動頁面的時候加載圖片的方法。即圖片懶加載！！！

 

2、實現懶加載的思路

當打開頁面的時候，剛開始不給顯示圖片的位置放圖片，等滾動或滑動到哪裏的時候在獲取圖片。固然若是咱們不給圖片src中放圖片，就會出現先找不到圖片的提示，這樣確定是不行的。

         因此咱們在放圖片的位置剛開始讓一張1像素的圖片做爲初始的圖片代替真正的圖片。等滾動或滑動到瀏覽器可視區域的時候在動態的替換丟url的地址，這裏用到js替換。

   如：<img data-url="img/4.png" src="img/pix.png" />

這裏的pix.png就是一張1px的圖片，至於data-url文檔上說這是一個H5的新屬性。這裏就存的是初始的時候1像素的圖片。

咱們在用以下方法：

$('img ').data('url'); //使用 data（）方法得到裏面的數據

3、所用到的知識

  一、如何獲取瀏覽器的可視高度

     var windHeight=$(window).height();//得到瀏覽器的可視高度

  二、如何得到滾動條相對於頂部的高度

     var  scrollTop=$(window).scrollTop;//得到滾動條相對於頂部的高度

  三、如何得到每張圖片想對於瀏覽器頂部的高度

      var imgTop=$('img').offset().top;//得到元素相對於頂部的高度

 四、如何判斷元素出如今了瀏覽器的可視區域內

      imgTop-windHeight<scrollTop?   元素相對頂部的高度-瀏覽器可視區域的高度<小於滾動條到頂部的高度   成立就表明出現：不成立就沒出現

  五、怎樣排除首屏的圖片

      imgTop-windHright>0//排除首屏圖片   元素到頂部的距離  - 減去  瀏覽器的可視高度

  六、排除已經加載的圖片

      $(this).attr('src')!=$(this).data('url');//排除已經加載的圖片

 

jq代碼