f-lazyload v0.1.2

原生无依赖，懒加载插件(完善ing...)
兼容IE8(不包括IE8)以上

``



实现的主要功能:

1、支持img,canvas,div(能设置background-image属性)标签元素

2、支持img设置srcset属性

3、自定义可视区域大小

4、自定义loading图片和error图片

5、支持预加载

6、自定义canvas 图像设置

7、自定义background 设置

8、支持淡入动画,可调节速度





$3



> npm install



$3



> npm run dev 浏览器自动打开localhost:3000



$3



> npm run build 查看dist目录





$3



1、页面引入



###or:



2、npm安装



> npm install --save f-lazyload



var Flazyload = require('f-lazyload');

var lazyload = new Flazyload({

	container: String, //指定父容器 默认body,例如:'.class' or '#id' or 'tag'

	src:String, // 自定义需要懒加载图片的标识,默认'data-src',格式为data-*

	srcset:String, // 自定义srcset图片的标识,默认'data-srcset',格式为data-*

	fadeIn: Number, //默认不开启动画, 数值为毫秒

	preload: Boolean, //首次进入页面后是否加载当前页面的图片,默认为true

	loadimg: String, //加载中图片 默认无图片

	errimg: String, //加载失败图片 默认无图片

	winH: Number, //指定可视区域大小,默认window.innerHeight

	winW: Number, //指定可视区域大小,默认window.innerWidth

	tag: String, //指定需要加载元素标签名称,默认img,如果全部懒加载的元素都是一种类型,最好指定一下类型

	mix: Boolean, //混杂模式,如果需要加载的元素包含img,canvas,div等则开启mix,默认false,开启混杂模式则不需要指定tag类型

	bgConfig:{ //background config

		bgSize: String, //设置background-size  默认'contain'

		bgPos: String //设置background-position 默认'center center'

	},

	cvsConfig:{ //canvas config

		//如果所有的canvas的宽度和高度都是固定则配置此选项，默认'inherit',会寻找canvas属性上是否有width||height属性,如果没有则继承style样式的width和height属性

		//你可以填写以下几个特殊参数,'inherit' or 'auto', 'auto'将会通过你设置的另一个属性进行等比缩放起到自适应

		//不支持设置'100%',但是你可以在style设置width:100%,然后width在配置参试设置'inherit'

		width:String || Number,

		height:String || Number,

		imgPos:Array,//img绘制的坐标位置，默认[0,0]

		imgScale:Boolean //img是否进行缩放充满整个canvas，默认true

	}

});

f-lazyload v0.1.2

实现的主要功能:
1、支持img,canvas,div(能设置background-image属性)标签元素
2、支持img设置srcset属性
3、自定义可视区域大小
4、自定义loading图片和error图片
5、支持预加载
6、自定义canvas 图像设置
7、自定义background 设置
8、支持淡入动画,可调节速度

$3

> npm install

$3

> npm run dev 浏览器自动打开localhost:3000

$3

> npm run build 查看dist目录

$3

1、页面引入

###or:

2、npm安装

> npm install --save f-lazyload

var Flazyload = require('f-lazyload');
var lazyload = new Flazyload({
container: String, //指定父容器默认body,例如:'.class' or '#id' or 'tag'
src:String, // 自定义需要懒加载图片的标识,默认'data-src',格式为data-*
srcset:String, // 自定义srcset图片的标识,默认'data-srcset',格式为data-*
fadeIn: Number, //默认不开启动画, 数值为毫秒
preload: Boolean, //首次进入页面后是否加载当前页面的图片,默认为true
loadimg: String, //加载中图片默认无图片
errimg: String, //加载失败图片默认无图片
winH: Number, //指定可视区域大小,默认window.innerHeight
winW: Number, //指定可视区域大小,默认window.innerWidth
tag: String, //指定需要加载元素标签名称,默认img,如果全部懒加载的元素都是一种类型,最好指定一下类型
mix: Boolean, //混杂模式,如果需要加载的元素包含img,canvas,div等则开启mix,默认false,开启混杂模式则不需要指定tag类型
bgConfig:{ //background config
bgSize: String, //设置background-size 默认'contain'
bgPos: String //设置background-position 默认'center center'
},
cvsConfig:{ //canvas config
//如果所有的canvas的宽度和高度都是固定则配置此选项，默认'inherit',会寻找canvas属性上是否有width||height属性,如果没有则继承style样式的width和height属性
//你可以填写以下几个特殊参数,'inherit' or 'auto', 'auto'将会通过你设置的另一个属性进行等比缩放起到自适应
//不支持设置'100%',但是你可以在style设置width:100%,然后width在配置参试设置'inherit'
width:String || Number,
height:String || Number,
imgPos:Array,//img绘制的坐标位置，默认[0,0]
imgScale:Boolean //img是否进行缩放充满整个canvas，默认true
}
});