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

y-image: web端图片加载库相关推荐

如何解决web端图片加载慢卡顿的问题？？？
公司官网上面有一的功能是在后台发布公司动态之后,在前台显示公司动态内容. 但是上上周团建之后,上传的公司动态中的图片加载速度就非常的慢. 图片加载慢的原因有两个: 1.图片过大导致的加载缓慢. 2.网 ...
Compose-jb图片加载库load-the-image,适用于KMM Compose desktop桌面端(Windows,Linux,MacOs)
前言 Android平台上有很多优秀的图片加载框架,比如Glide,Picasso,Fresco 而Compose-jetpack上的图片加载框架有Coil 但Compose-jb上却暂时没有图片加载 ...
FaceBook推出的Android图片加载库-Fresco
源文件:http://www.mamicode.com/info-detail-544084.html 在Android设备上面,快速高效的显示图片是极为重要的.过去的几年里,我们在如何高效的存储图像 ...
Android图片加载库Fresco
在Android设备上面,快速高效的显示图片是极为重要的.过去的几年里,我们在如何高效的存储图像这方面遇到了很多问题.图片太大,但是手机的内存却很小.每一个像素的R.G.B和alpha通道总共要占用4 ...
fackbook的Fresco （FaceBook推出的Android图片加载库-Fresco）
[Android开发经验]FaceBook推出的Android图片加载库-Fresco 欢迎关注ndroid-tech-frontier开源项目,定期翻译国外Android优质的技术.开源库.软件架构 ...
FaceBook推出的Android图片加载库Fresco
在Android设备上面,快速高效的显示图片是极为重要的.过去的几年里,我们在如何高效的存储图像这方面遇到了很多问题.图片太大,但是手机的内存却很小.每一个像素的R.G.B和alpha通道总共要占用4 ...
Fresco-FaceBook推出的Android图片加载库
在Android设备上面,快速高效的显示图片是极为重要的.过去的几年里,我们在如何高效的存储图像这方面遇到了很多问题.图片太大,但是手机的内存却很小.每一个像素的R.G.B和alpha通道总共要占用4 ...
Android图片加载库—Picasso一个强大的图像下载和缓存库
介绍 GitHub源码点击查看 Picasso是一款强大的图片下载和缓存开源软件,只能在Android平台上使用,由Square开发.使用Picasso可以添加一些必须的特性和视觉效果到Androi ...
Android开源框架——图片加载库Glide
Glide是有google开发的图片加载库,支持图片加载与处理,包括动态图片的加载,以及视频的解码. 开源地址:https://github.com/bumptech/glide build.grad ...

y-image: web端图片加载库

y-image

效果

安装

1. CDN引入

2. npm引入

用法

1. CDN方式调用

2. npm 方式调用

API

YImage - 静态方法

1. with(context):

YImage - 实例方法

1. load(url)

2. placeholder(url)

3. error(url)

4. callback(onsuccess, onerror)

5. into(elementStr)

源码地址

y-image: web端图片加载库相关推荐

最新文章

热门文章