ambar/teleport.html

## teleport.html
<html>
<head>
    <title></title>
    <style type="text/css">
    #list{width:500px;height:auto;background-color: #eee;}
    .ph{width:500px;height:600px;background-color: #cde;margin:2em 0;}
    </style>
</head>
<body>
<div style="height:100px;background:#cde;">placeholder1</div>
<br>
<div id="ph2" style="height:200px;background:#ccc;">placeholder2</div>
<hr>
<div class="ph" id="ph_a"></div>
<div class="ph" id="ph_b"></div>
<div class="ph" id="ph_c"></div>
<hr>
<ul id="list"></ul>
<button id="btn">Show more</button>

<script type="text/javascript" src="js/jquery-latest.min.js"></script>
<script type="text/javascript">
// 无限内容传送 v 0.2
var Teleport = function(el,options) {
    var $el = $(el), self = this;
    if(!$el.length) return;

    this.$el = $el;
    this.opt = $.extend({},this.defaults,options||{});

    this._scrollHandler = function() {
        self.checkInView();
    };
    // buged this._scrollHandler = $.proxy(this.checkInView,this);
    this.enable();
    this.regist();
    $el.data()[this.opt.namespace] = this;

    // delay
    setTimeout($.proxy(this.checkInView,this),0)
};
Teleport.isInView = function($el) {
    var $win = $(window);
    return $win.scrollTop() + $win.height() > $el.offset().top;
};
Teleport.prototype = {
    defaults : {
        namespace : 'teleport',
        inView : $.noop
    },
    disable : function() {
        var $win = $(window), ns = this.opt.namespace
        $win.unbind('scroll.'+ns+' resize.'+ns,this._scrollHandler);
    },
    enable : function() {
        this.disable();
        var $win = $(window), $el = this.$el, ns = this.opt.namespace;
        $win.bind('scroll.'+ns+' resize.'+ns, this._scrollHandler);
    },
    checkInView : function() {
        var $el = this.$el, ns = this.opt.namespace;
        if( this.isInView() ){
            $el.trigger(ns+':inView');
        }
    },
    isInView    : function() {
        return Teleport.isInView(this.$el);
    },
    // all func in options intend to be an event;
    regist  : function() {
        var self = this, $el = self.$el, opt = self.opt, ns = opt.namespace
        $.each(opt,function(k,v) {
            $.isFunction(v) && $el.bind(ns+':'+k,v)
        });
    }
};


$.fn.teleport = function(options) {
    return this.each(function() {
        var type = typeof options;
        if(type === 'object'){
            //instantiate
            new Teleport(this,options);
        }else if(type === 'string'){
            // call instance method. eg: $el.teleport('disable')
            var tp = $(this).data().teleport;
            tp && $.isFunction(tp[options]) && tp[options]();
        }
    })
};

$(function() {
    var config = {
        inView : function(e) {
            console.log('act',e.type,e,this);
            tp.disable();

            $.get('expr.html')
            .done(function(html) {
               $('#list').append($(html).find('li'));
               tp.enable();
            })
        }
    };
    // var tp = new Teleport('#btn',config);


    var config2 = {
        inView : function(e) {
            console.log('act',e.type,e,this);
            // var tp = $(this).data().teleport;
            // tp.disable();
            $btn.teleport('disable')

            $.get('expr.html')
            .done(function(html) {
               $('#list').append($(html).find('li'));
               // tp.enable();
               $btn.teleport('enable')
            })
        }
    };
    var $btn = $('#btn');
    // $btn.teleport(config2);

    $('div.ph')
    // .first()
    .teleport({
        inView : function() {
            console.log('act',this);
        }
    })
})

</script>
</body>
</html>
	<html>
	<head>
	<title></title>
	<style type="text/css">
	#list{width:500px;height:auto;background-color: #eee;}
	.ph{width:500px;height:600px;background-color: #cde;margin:2em 0;}
	</style>
	</head>
	<body>
	<div style="height:100px;background:#cde;">placeholder1</div>
	<br>
	<div id="ph2" style="height:200px;background:#ccc;">placeholder2</div>
	<hr>
	<div class="ph" id="ph_a"></div>
	<div class="ph" id="ph_b"></div>
	<div class="ph" id="ph_c"></div>
	<hr>
	<ul id="list"></ul>
	<button id="btn">Show more</button>

	<script type="text/javascript" src="js/jquery-latest.min.js"></script>
	<script type="text/javascript">
	// 无限内容传送 v 0.2
	var Teleport = function(el,options) {
	var $el = $(el), self = this;
	if(!$el.length) return;

	this.$el = $el;
	this.opt = $.extend({},this.defaults,options\|\|{});

	this._scrollHandler = function() {
	self.checkInView();
	};
	// buged this._scrollHandler = $.proxy(this.checkInView,this);
	this.enable();
	this.regist();
	$el.data()[this.opt.namespace] = this;

	// delay
	setTimeout($.proxy(this.checkInView,this),0)
	};
	Teleport.isInView = function($el) {
	var $win = $(window);
	return $win.scrollTop() + $win.height() > $el.offset().top;
	};
	Teleport.prototype = {
	defaults : {
	namespace : 'teleport',
	inView : $.noop
	},
	disable : function() {
	var $win = $(window), ns = this.opt.namespace
	$win.unbind('scroll.'+ns+' resize.'+ns,this._scrollHandler);
	},
	enable : function() {
	this.disable();
	var $win = $(window), $el = this.$el, ns = this.opt.namespace;
	$win.bind('scroll.'+ns+' resize.'+ns, this._scrollHandler);
	},
	checkInView : function() {
	var $el = this.$el, ns = this.opt.namespace;
	if( this.isInView() ){
	$el.trigger(ns+':inView');
	}
	},
	isInView : function() {
	return Teleport.isInView(this.$el);
	},
	// all func in options intend to be an event;
	regist : function() {
	var self = this, $el = self.$el, opt = self.opt, ns = opt.namespace
	$.each(opt,function(k,v) {
	$.isFunction(v) && $el.bind(ns+':'+k,v)
	});
	}
	};


	$.fn.teleport = function(options) {
	return this.each(function() {
	var type = typeof options;
	if(type === 'object'){
	//instantiate
	new Teleport(this,options);
	}else if(type === 'string'){
	// call instance method. eg: $el.teleport('disable')
	var tp = $(this).data().teleport;
	tp && $.isFunction(tp[options]) && tp[options]();
	}
	})
	};

	$(function() {
	var config = {
	inView : function(e) {
	console.log('act',e.type,e,this);
	tp.disable();

	$.get('expr.html')
	.done(function(html) {
	$('#list').append($(html).find('li'));
	tp.enable();
	})
	}
	};
	// var tp = new Teleport('#btn',config);


	var config2 = {
	inView : function(e) {
	console.log('act',e.type,e,this);
	// var tp = $(this).data().teleport;
	// tp.disable();
	$btn.teleport('disable')

	$.get('expr.html')
	.done(function(html) {
	$('#list').append($(html).find('li'));
	// tp.enable();
	$btn.teleport('enable')
	})
	}
	};
	var $btn = $('#btn');
	// $btn.teleport(config2);

	$('div.ph')
	// .first()
	.teleport({
	inView : function() {
	console.log('act',this);
	}
	})
	})

	</script>
	</body>
	</html>