性能优化懒懒加载懒动画 --- 基于window滚动事件来实时更新DOM的视图状态，以表明是否在规定的可视区，并作有change回调

Posted 2020-08-11

/*
 *
 * 扩展jq原型: 懒、懒加载、懒动画
 * --- 基于window滚动事件来实时更新DOM的视图状态，以表明是否在规定的可视区，并作有change回调
 *
 * $jq.viewChange( {top:100,bottom:100,change:function(status){}} ) --- status: ‘in‘/‘out‘
 * $jq.viewChange(‘off‘)
 *
 * $jq[n].viewChange.status = ‘in‘/‘out‘ ----- 状态为‘in‘表示该DOM在规定的可视区
 *
 */
(function() {

	var $win = $(window);
	var winH = $win.height();

	var _isRun = true;
	$win.resize(function() {
		winH = $win.height();
		if (_isRun) {
			_isRun = false;
			setTimeout(function() {
				$win.trigger(‘scroll.viewChange‘);
				_isRun = true;
			}, 100);
		}
	});

	var setStatus = function(params) {
		if (this.parentElement) { //判断DOM是否还在页面中
			var $self = $(this);
			var offsetTop = $self.offset().top,
				selfH = $self.height(),
				scrollTop = $win.scrollTop();
			if (scrollTop + winH + params.bottom > offsetTop && scrollTop - params.top < offsetTop + selfH) {
				if (this.viewChange.status !== ‘in‘) {
					this.viewChange.status = ‘in‘;
					params.change.call(this, this.viewChange.status);
				}
			} else {
				if (this.viewChange.status !== ‘out‘) {
					this.viewChange.status = ‘out‘;
					params.change.call(this, this.viewChange.status);
				}
			}
		} else {
			$win.off(‘scroll.‘ + this.viewChange.eventNamespace);
		}
	};

	$.fn.viewChange = function(options) {
		if (options === ‘off‘) {
			this.each(function() {
				if (this.viewChange) {
					$win.off(‘scroll.‘ + this.viewChange.eventNamespace);
					delete this.viewChange;
				}
			});
		} else {
			var params = {
				top: 0, //增加或缩小顶部范围
				bottom: 0, //增加或缩小底部范围
				change: $.noop //视图状态发生改变时的回调：function(status){}
			};
			params = $.extend(params, options);
			params.top = parseInt(params.top);
			params.bottom = parseInt(params.bottom);
			this.each(function() {
				if (this.viewChange) {
					$win.off(‘scroll.‘ + this.viewChange.eventNamespace);
				}
				this.viewChange = {
					eventNamespace: ‘viewChange.‘ + Math.random().toString().replace(‘0.‘, ‘‘),
				};
				$win.on(‘scroll.‘ + this.viewChange.eventNamespace, function() {
					setStatus.call(this, params);
				}.bind(this));
				setStatus.call(this, params);
			});
		}
		return this;
	};

})();



//使用情况
$jq.viewChange({
	top: -100, //缩小顶部范围
	bottom: 100, //增加底部范围
	change: function(status) {
		if (status === ‘in‘) {
			//当滚动到规定的可视区时
		} else if (status === ‘out‘) {
			//当滚动出规定的可视区时
		}
	}
});