Javascript常见操作

图片预加载

---

var image = new Image();
image.onload = onLoad;
image.onerror = onLoad;
image.src =src;

image.complete

图片懒加载

---

function lazyHandler() {
	lazyLoadImages = pageContainer.find('.lazy');
	lazyLoadImages.each(function(index, el) {
		el = $(el);
		if (isElementInViewport(el[0])) {
			loadImage(el);
		}
	});
}

function isElementInViewport (el) {
	var rect = el.getBoundingClientRect();
	var threshold = app.params.imagesLazyLoadThreshold || 0;
	return (
		rect.top >= (0 - threshold) &&
		rect.left >= (0 - threshold) &&
		rect.top <= (window.innerHeight + threshold) &&
		rect.left <= (window.innerWidth + threshold)
	);
}
function attachEvents(destroy) {
	var method = destroy ? 'off' : 'on';
	pageContent[method]('lazy', lazyHandler);
	pageContent[method]('scroll', lazyHandler);
	$(window)[method]('resize', lazyHandler);
}
lazyHandler();
attachEvents();

下拉刷新

---

function handleInfiniteScroll() {
	var inf = $(this);
	var scrollTop = inf[0].scrollTop;
	var scrollHeight = inf[0].scrollHeight;
	var height = inf[0].offsetHeight;
	var distance = inf[0].getAttribute('data-distance');
	var onTop = inf.hasClass('infinite-scroll-top');
	if (!distance) distance = 50;
	if (typeof distance === 'string' && distance.indexOf('%') >= 0) {
		distance = parseInt(distance, 10) / 100 * height;
	}
	if (distance > height) distance = height;
	if (onTop) {
		if (scrollTop < distance) {
			inf.trigger('infinite');
		}
	}
	else {
		if (scrollTop + height >= scrollHeight - distance) {
			inf.trigger('infinite');
		}
	}
		
}
attachInfiniteScroll = function (infiniteContent) {
	$(infiniteContent).on('scroll', handleInfiniteScroll);
};
detachInfiniteScroll = function (infiniteContent) {
	$(infiniteContent).off('scroll', handleInfiniteScroll);
};

 还需要补充：
蒙版、弹出窗口、浮动广告等小技巧。