摘要：最近面試了幾家公司，他們不約而同都問到了這個問題了解嗎其實是對圖片的一種延遲加載技術，直到用戶滾動圖片出現(xiàn)在用戶可視范圍時才把它加載出來。我在上親身實踐了一下，然而發(fā)現(xiàn)，總是返回，其他兩種方法都正常獲取到了值。

最近面試了幾家公司，他們不約而同都問到了這個問題：了解 Lazy Load 嗎？

Lazy Load is delays loading of images in long web pages. Images outside of viewport are not loaded until user scrolls to them. This is opposite of image preloading. 
Using Lazy Load on long web pages will make the page load faster. In some cases it can also help to reduce server load.

Lazy Load其實是對圖片的一種延遲加載技術，直到用戶滾動圖片出現(xiàn)在用戶可視范圍時才把它加載出來。它與圖片預加載技術完全相反，卻都是為了提高用戶體驗而設計。

Lazy Load Plugin for jQuery - Mika Tuupola

jQuery的Lazy Load插件大家應該都有了解或者已經(jīng)使用過了。下面是一個簡單的栗子：

    
    
    $(function() {
        $("img.lazy").lazyload();//可以傳入自定義的參數(shù)
    });

data-original屬性值是我們想要顯示的圖片的URL，當用戶滾動頁面，圖片出現(xiàn)在視線范圍內(nèi)時，替換img元素的src屬性值為data-original屬性值。

不過僅僅了解這些好像遠遠不夠。我在網(wǎng)上查找了一些Lazy Load的實現(xiàn)原理，發(fā)現(xiàn)了以下的代碼：

    // 原生JS實現(xiàn)方法
    

這位老鐵自己寫了一段簡陋的實現(xiàn)代碼，他用了定時器循環(huán)調(diào)用lazyload方法，當然大家可以先忽略，重點看一下如何獲取當前滾動條的位置和視口的高度。

    var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

這個東西我剛看也是一頭霧水。我在chrome上親身實踐了一下，然而發(fā)現(xiàn)，document.documentElement.scrollTop總是返回0，其他兩種方法都正常獲取到了值。于是查了一下才知道這三個獲取滾動條位置的方法背后還有故事。看這個問題：

document.documentElement.scrollTop return value differs in Chrome

還有其中一位老鐵的回答：

The standards-based way of getting the scroll is window.scrollY. This is supported by Chrome, Firefox, Opera, Safari and IE Edge or later. If you only support these browsers, you should go with this property.
IE >= 9 supports a similar property window.pageYOffset, which for the sake of compatibility returns the same as window.scrollY in recent browsers, though it may perhaps be deprecated at some point.
The problem with using document.documentElement.scrollTop or document.body.scrollTop is that the scroll needn"t be defined on either of these. Chrome and Safari define their scroll on the  element whilst Firefox defines it on the  element returned by document.documentElement, for example. This is not standardized, and could potentially change in future versions of the browsers. However, if the scrollY or pageYOffset are not present, this is the only way to get the scroll.
window.scrollY || window.pageYOffset || document.body.scrollTop + (document.documentElement && document.documentElement.scrollTop || 0)

那這故事我就不講了。

    var viewportSize = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

這行代碼是為了獲取視口的高度，我們同樣看到了三種方法，那他們背后肯定也有不為我知的故事，現(xiàn)在我也不太想知道了。

    var x =scrollTop+viewportSize-imgs[i].offsetTop;

如何獲得一個元素與頁面頂端的距離，你學會了嗎？

下面是用jQuery實現(xiàn)的lazyload，也是剛才那位老鐵寫的：

    /**
    * 圖片的src實現(xiàn)原理
    */
    $(document).ready(function(){
        // 獲取頁面視口高度
        var viewportHeight = $(window).height();
        var lazyload = function() {
            // 獲取窗口滾動條距離
            var scrollTop = $(window).scrollTop();
            $("img").each(function(){
            // 判斷 視口高度+滾動條距離 與 圖片元素距離文檔原點的高度         
            var x = scrollTop + viewportHeight - $(this).position().top;
            // 如果大于0 即該元素能被瀏覽者看到，則將暫存于自定義屬性loadpic的值賦值給真正的src            
            if (x > 0)
            {
                $(this).attr("src",$(this).attr("loadpic")); 
            }
        })
        }
        // 創(chuàng)建定時器 “實時”計算每個元素的src是否應該被賦值
        setInterval(lazyload,100);
    });

上述的實現(xiàn)呢，我感覺還是可以說服我的，把定時器去掉，加入對滾動事件的偵聽即可。不過，就這么草草了事好像也沒什么意思，我下載了jQuery-lazyload的源碼，準備研究一波。如果我看懂了什么，或者有什么收獲，再來聊聊。

    /*!
     * Lazy Load - jQuery plugin for lazy loading images
     *
     * Copyright (c) 2007-2015 Mika Tuupola
     *
     * Licensed under the MIT license:
     *   http://www.opensource.org/licenses/mit-license.php
     *
     * Project home:
     *   http://www.appelsiini.net/projects/lazyload
     *
     * Version:  1.9.7
     *
     */
    (function($, window, document, undefined) {
      // body...
    })(jQuery, window, document);