11行代码实现简单的图片懒加载以及背景图懒加载
本文由 小茗同学 发表于 2016-09-08 浏览(1887)
最后修改 2016-09-08 标签:javascript 图片 背景图 懒加载 lazy

前言

网上绝大多是图片懒加载插件都是针对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);