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或者其余的可自行扩展！

 

有兴趣的能够测试一下如何！