前言

网上绝大多是图片懒加载插件都是针对img的src的，但是很多时候图片是以背景图的形式存在的，因为这种方式可以很容易实现图片不变形但是又保证宽高度固定，所以只能自己写一个。

这里只是简单的实现，没有考虑横向滚动、div滚动等等情况，但相信已经满足大部分情况了。

代码

直接上代码，标题说11行，真有点吹了，哈哈，其实是去掉了大括号之后还剩11行，一共有15行：

/**
 * 图片懒加载插件，与绝大多数同类插件不同的是，本插件同时支持img的src和div的背景图懒加载
 * 将图片以背景图的方式展示到div的好处是可以轻松实现图片不变形，所以背景图懒加载的需求还是比较常见的
 * 使用方法：将页面中展示图片的div或者img的图片地址以data-lazy-src="xxx"形式指定
 * 然后引入本JS即可，无需任何其他代码，支持动态生成内容的懒加载，但是每次动态增加内容之后需主动调用一句：
 * $(window).scroll();
 * @start 2016-08-18
 * @last 2016-09-08
 * @author lxa
 */
;(function($)
{
	$(window).on('scroll resize load', function(e)
	{
		var notFoundCount = 0, maxNotFound = 2, screenHeight = $(window).height();
		$('[data-lazy-src]').each(function()
		{
			var pos = this.getBoundingClientRect();
			if(pos.bottom <= 0) return true; // 如果当前图片在视野上方，继续往下查找
			if(pos.top >= screenHeight) return (notFoundCount++) < maxNotFound; // 如果连续超过 maxNotFound 张图片都在视野下方，停止查找，注意只有从上到下的图片布局才能这样判断
			var src = this.dataset.lazySrc;
			if(!src) return;
			if(this.nodeName === 'IMG') this.src = src;
			else this.style.backgroundImage = 'url(' + src + ')';
			this.removeAttribute('data-lazy-src');
		});
	});
})(jQuery);

如果内容是动态生成的，则需要在每次动态增加内容之后主动调用一句：$(window).scroll();

旧的写法

开始是像下面这样写的，但是这种写法要求每次动态增加内容之后主动调用一句$('[data-lazy-src]').lazyload()，所以改成上面这样了，当然上面也还是要调用一句话，其实二者没有太大差别。

/**
 * 图片懒加载插件，与绝大多数插件不同的是，本插件同时支持img的src和div的背景图懒加载
 * @start 2016-08-18
 * @last 2016-09-08
 * @author lxa
 */
;(function($)
{
	$.fn.lazyload = function()
	{
		var that = this;
		function refresh()
		{
			var count = 0, screenHeight = $(window).height();
			that.each(function()
			{
				var pos = this.getBoundingClientRect();
				if(pos.bottom <= 0) return true; // 如果当前图片在视野上方，继续往下查找
				if(pos.top >= screenHeight) return (count++) < 2; // 如果连续超过2张图片都在视野下方，停止查找，注意只有图片布局从上到下才能这样判断
				var src = this.dataset.lazySrc;
				if(!src) return;
				if(this.nodeName === 'IMG') this.src = src;
				else this.style.backgroundImage = 'url(' + src + ')';
				this.removeAttribute('data-lazy-src');
			});
		}
		$(window).on('scroll resize', refresh);
		refresh();
	};
	$(function()
	{
		$('[data-lazy-src]').lazyload();
	});
})(jQuery);