简单实现图片Lazyload办法

提醒：本文最后更新于 3550 天前，文中所描述的信息可能已发生改变，请仔细核实。

添加如下js。在要使用Lazyload的图片，添加class="lazyload"，即可。实现效果：当页面可视范围存在图片时，加载图片。

jQuery(document).ready(function($) {
	function lazyload() {
		var oLazyload = $("img.lazyload"), fLazyload = function(hLazyload) {
		var nLazyload = $(window).height() + $(document).scrollTop();
		oLazyload.each(function() {
		$(this).offset().top < nLazyload && ($(this).trigger("appear"), oLazyload = oLazyload.not(this));
		}), 0 == oLazyload.length && $(window).unbind("scroll", fLazyload);
		};
		oLazyload.each(function() {
		$(this).one("appear", function() {
		$(this).attr("src", $(this).attr("data-original"));
		});
		}), $(window).bind("scroll", fLazyload), fLazyload();
	}
	lazyload();
});

转载请注明转自:kn007的个人博客的《简单实现图片Lazyload办法》