原生JS實現圖片的懶加載

思路

首先，什麼是懶加載，從字面意思就能夠簡單的理解爲不到用時就不去加載，對於頁面中的元素，咱們能夠這樣理解：只有當滾動頁面內容使得本元素進入到瀏覽器視窗時（或者稍微提早，需給定提早量），咱們纔開始加載圖片；

那麼咱們知道，當不給img元素的src屬性賦值時，不會發出請求【不能使src=""，這樣即便只給src賦了空值也會發出請求】，而一旦給src屬性賦予資源地址值，那麼該請求發出，使得圖片顯示；因此這裏咱們利用這一點控制img元素的加載時機。
在開始的時候將資源url放置在自定義屬性data-src當中，而後在須要加載的時候獲取該屬性並賦值給元素的src屬性

難點

視窗內元素判斷

從上面的分析能夠看出來，主要要解決的問題就是怎麼檢測到元素是否在視窗當中，這裏咱們要藉助於dom操做api當中的el.getBoundingClientRect()來獲取其位置，並判斷是否在視窗內，這裏簡單描述。

Element.getBoundingClientRect()方法返回元素的大小及其相對於視口的位置。返回值是一個 DOMRect 對象，這個對象是由該元素的 getClientRects() 方法返回的一組矩形的集合, 即：是與該元素相關的CSS 邊框集合 。DOMRect 對象包含了一組用於描述邊框的只讀屬性——left、top、right和bottom，單位爲像素。除了 width 和 height 外的屬性都是相對於視口的左上角位置而言的。

所以咱們可使用如下邏輯判斷元素是否進入視窗：

function isInSight(el){
            var eldom = typeof el == 'object'?el:document.querySelector(el);
            var bound = eldom.getBoundingClientRect();
            // 這裏的bound包含了el距離視窗的距離；
            // bound.left是元素距離窗口左側的距離值；
            // bound.top是袁術距離窗口頂端的距離值；

            // 以以上兩個數值判斷元素是否進入視窗；
            var clientHeigt = window.innerHeight;
            var clientWidth = window.innerWidth;
            // return (bound.top>=0&&bound.left>=0)&&(bound.top<=window.innerHeight+20)&&(bound.left<=window.innerWidth+20);
            return !((bound.top>clientHeigt)||(bound.bottom<0)||(bound.left>clientWidth)||(bound.right<0))
        }

其中window.innerHeight和window.innerWidth分別爲視窗的高度和寬度，之因此加上20是爲了讓懶加載稍稍提早，使用戶體驗更好；

添加scroll事件監聽

那麼何時去檢測元素是否在視窗內，並判斷是否加載呢，這裏因爲頁面的滾動會使得元素相對於視窗的位置發生變化，也就是說滾動會改變isInSight的結果，因此這裏咱們在window上添加scroll事件監聽：

// 當加載完成，檢測並加載可視範圍內的圖片
        window.onload= checkAllImgs;
        // 添加滾動監聽，便可視範圍變化時檢測當前範圍內的圖片是否能夠加載了
        window.addEventListener("scroll",function(){
            checkAllImgs();
        })

        // 檢測全部圖片，並給視窗中的圖片的src屬性賦值，即開始加載；
        function checkAllImgs(){
            var imgs = document.querySelectorAll("img");
            Array.prototype.forEach.call(imgs,function(el){
                if(isInSight(el)){
                    loadImg(el);
                }
            })
        }
        // 開始加載指定el的資源
        function loadImg(el){
            var eldom = typeof el == 'object'?el:document.querySelector(el);
            if(!eldom.src){
               // 懶加載img定義如：<div class="img"><img  alt="加載中" data-index=7 data-src="http://az608707.vo.msecnd.net/files/MartapuraMarket_EN-US9502204987_1366x768.jpg"></div>
                var source = eldom.getAttribute("data-src");
                var index = eldom.getAttribute("data-index");
                eldom.src = source; 
                console.log("第"+index+"張圖片進入視窗，開始加載。。。。")
            }
            
        }

這裏就不考慮添加事件的各類兼容性了。

這樣就實現了圖片的懶加載的簡單實現，固然還能夠對scroll進行優化等操做，這裏不作過多闡述了。

演示地址

（LazyLoadForImg）圖片的懶加載