TypeScript爲Zepto編寫LazyLoad插件

平時項目中使用的所有是jQuery框架，可是對於作webapp來講jQuery太過於龐大，固然你能夠選擇jQuery 2.*針對移動端的版本。

這裏我採用移動端使用率比較多的zepto框架，他跟jquery語法相似，至關於精簡的jQuery把！

作webapp不得不考慮用戶的網絡狀況跟用戶體驗度，因此傳統的分頁，在webapp上確定是不行的，這裏通常狀況都是作成滾動自動更新，對於圖片方面，固然是lazyload了，可是網上的lazyload Plugin是jQuery的，固然你能夠改寫成Zepto的，這裏咱們本身動手寫一個，其實也挺簡單的，這裏咱們用TypeScript來編寫！

/// <reference path="../typings/zepto/zepto.d.ts" />

(function ($) {
    $.fn.lazyload = function (ops) {
        var $w = $(this);
        var options = <lazyloadOptions>$.extend({filter: "*[data-lazy]", preloadHeight: 50 }, ops);
        var height =$w.height();
        $w.on("scroll", e => {
            var elements = $(options.filter + "[data-origin]");
            var top_end = (<HTMLElement>$w[0]).scrollTop +height+ options.preloadHeight;
            elements.each((index:number, item: HTMLElement) => {
                var $item: ZeptoCollection = $(item);
                var t = Math.floor($item.offset().top);
                if (t <= top_end) {
                    var origin = $item.attr("data-origin");
                    $item.removeAttr("data-origin").removeAttr("data-lazy");
                    switch (item.tagName.toLowerCase()) {
                        case "img":
                            $item.attr({ src: origin, a: origin });
                            break;
                        default:
                            $item.load(origin);
                            break;
                    }
                }
                return true;
            });
        });
        $w.trigger("scroll");
    };
})(Zepto);

interface lazyloadOptions {
    filter: string;//過濾器
    preloadHeight: number;//預加載高度
}

調用就很簡單了：

<script type="text/javascript">
        $(function () {
            $(".page").lazyload();
        });
    </script>

 這裏沒有作DIV標籤背景圖片的lazyload，由於個人使用場景不一樣，

這裏圖片只要定義成<img src='about:blank' data-lazy="true" data-origin="/Content/images/daoyou/dy1.png" />便可

而後DIV等標籤ajax加載也作成了lazyload

<div data-lazy="true" data-origin="/Test/test">正在加載...</div>

便可！

這個是經過F12開發人員工具看的正常狀態下但是區域作下面一行的預加載狀況，處於當前行下面的圖片沒有到達預加載範圍，因此src仍是初始化的值

這個是在不可視區域（未加載區域）的DIV，data-origin屬性是要用ajax加載的Url，當前還還沒有加載！

當DIV滾動到加載區域，會自動Ajax請求data-origin屬性的地址，這裏只作了簡單的get請求，若是有POST或者其餘的可自行擴展！

 

有興趣的能夠測試一下如何！