y-image v0.2.3

y-image

web端图片加载库 - 根据不同状态(加载中，成功， 失败),加载不同图片

效果

安装

1. CDN引入

<script src="https://cdn.jsdelivr.net/npm/y-image/dist/yimage.js"></script>

2. npm引入

# 最新稳定版
npm install y-image --save-dev

用法

1. CDN方式调用

	<img id="myImg" style="width: 300px;height: 300px;" title="我是待加载的图片"/>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/y-image/dist/yimage.js"></script>
	<script type="text/javascript">
		// 链式调用YImage，加载图片
		YImage.with(this)     // load(url): 需要加载的图片
		.load('http://img.zcool.cn/community/0117e2571b8b246ac72538120dd8a4.jpg@1280w_1l_2o_100sh.jpg')
        .placeholder('https://i.loli.net/2019/02/19/5c6ba43e10a8f.gif') // 加载完成前的占位图
        .error('https://i.loli.net/2019/02/19/5c6ba4988b892.jpg') // 加载失败的显示图
		.into('#myImg')
	</script>

2. npm 方式调用

步骤1 - npm安装

npm install y-image --save-dev

步骤2 - YImage: 调用

    import YImage from 'y-image'

YImage.with(this)    // load(url): 需要加载的图片
.load('http://img.zcool.cn/community/0117e2571b8b246ac72538120dd8a4.jpg@1280w_1l_2o_100sh.jpg')
.placeholder('https://i.loli.net/2019/02/19/5c6ba43e10a8f.gif') // 加载完成前的占位图
.error('https://i.loli.net/2019/02/19/5c6ba4988b892.jpg') // 加载失败的显示图
.into('#myImg') //  img标签id: <img id="myImg"/>

## API
#### YImage - 静态方法
##### 1. with(context):
    context: 当前上下文
  返回 YImage实例
#### YImage - 实例方法
##### 1. load(url)

• url: 需要加载图片的url return 当前YImage实例

##### 2. placeholder(url)

• url: 加载完成前的占位图的url return 当前YImage实例

##### 3. error(url)

• url: 加载失败的显示图的url return 当前YImage实例

##### 4. callback(onsuccess, onerror)

• onsuccess: 加载成功的回调函数
• onerror: 加载失败的回调函数 return 当前YImage实例

##### 5. into(elementStr)

• elementStr: 需要显示的img标签的CSS选择器 (eg. #imgId imgClass img ), 若有多个符合，则返回第一个 return void

## 源码地址
* github源码地址: https://github.com/yanwosky4/y-image
* npm地址: https://www.npmjs.com/package/y-image
* csdn博客地址: https://blog.csdn.net/sinat_20623345/article/details/87740884