动态渲染的html 实现图片懒加载,11行代码实现简单的图片懒加载以及背景图懒加载...

前言

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