一、頁面滾動加載圖片的理解
當一個網頁含有大量的圖片的時候，往往在打開頁面的加載的很慢，如現在的大型電商、新聞、微博等，如果一下加載整個網頁的所有圖片，那會是一個緩慢的過程，要想快速的瀏覽網頁，我們這時候就需要用到了在滾動或滑動頁面的時候加載圖片的方法。即圖片懶加載！！！
二、實現懶加載的思路
當打開頁面的時候，剛開始不給顯示圖片的位置放圖片，等滾動或滑動到哪里的時候在獲取圖片。當然如果我們不給圖片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（）方法獲得里面的數據三、所用到的知識
1、如何獲取瀏覽器的可視高度
var windHeight=$(window).height();//獲得瀏覽器的可視高度
2、如何獲得滾動條相對於頂部的高度
var scrollTop=$(window).scrollTop;//獲得滾動條相對於頂部的高度
3、如何獲得每張圖片想對於瀏覽器頂部的高度
var imgTop=$('img').offset().top;//獲得元素相對於頂部的高度
4、如何判斷元素出現在了瀏覽器的可視區域內
imgTop-windHeight<scrollTop? 元素相對頂部的高度-瀏覽器可視區域的高度<小於滾動條到頂部的高度 成立就代表出現：不成立就沒出現
5、怎樣排除首屏的圖片
imgTop-windHright>0//排除首屏圖片 元素到頂部的距離 - 減去 瀏覽器的可視高度
6、排除已經加載的圖片
$(this).attr('src')!=$(this).data('url');//排除已經加載的圖片
jq代碼
