Typescript writing Lazyload plugin for Zepto

The jquery framework is all that is used in the project, but jquery is too big for webapp, and of course you can choose the version of jquery 2.* for the mobile side.

Here I use a more mobile zepto framework, he is similar to jquery syntax, equivalent to a streamlined jquery!

Do WebApp have to consider the user's network situation and user experience degree, so the traditional paging, in the WebApp is certainly not, here the general situation is made of rolling automatic update, for the picture, of course, is lazyload, but the online lazyload Plugin is jquery, of course you can change into zepto, here we write a, in fact, quite simple, here we use typescript to write!

///<reference path= ". /typings/zepto/zepto.d.ts "/>(function($) {$.fn.lazyload=function(OPS) {var$w = $ ( This); varOptions = <lazyloadoptions>$.extend ({filter: "*[data-lazy]", preloadheight:50}, OPS); varHeight =$w. Height (); $w. On ("Scroll", E = {            varElements = $ (Options.filter + "[Data-origin]"); varTop_end = (<HTMLElement> $w [0]). scrolltop +height+Options.preloadheight; Elements.each (Index:number, item:htmlelement)= {                var$item: zeptocollection =$ (item); vart =Math.floor ($item. Offset (). top); if(T <=top_end) {                    varOrigin = $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;//Filter FiltersPreloadheight:number;//Pre-load height}

The call is simple:

<script type= "Text/javascript" >        $ (function  () {            $ (". Page"). Lazyload ();        });     </script>

There is no lazyload to do the div tag background picture, because my usage scene is different,

Here the image as long as defined as Can

Then the div and so on tagged ajax loading also made Lazyload

<div data-lazy= "true" data-origin= "/test/test" > Loading ...</div>

Can!

Interested can test how!

Typescript writing Lazyload plugin for Zepto