react实现一个优雅的图片占位模块组件详解


Posted in Javascript onOctober 30, 2017

前言

发现项目中的图片占位模块写得很不优雅,找了一圈,发现没找到自己想要的图片组件。于是自己写了一个,写了一个还算优雅的图片组件:mult-transition-image-view

截图:

react实现一个优雅的图片占位模块组件详解

功能简介

首先它是一个比较优雅的组件:用起来不头疼。

第二个它能实现以下场景:

  • 没有图片的时候,显示一个占位图(可以直接用css来写背景,方便自定义)
  • 希望在加载大图的时候,能先占位一张小图,然后再过渡到一张大图。类似上面的截图。

使用方法

安装npm 包

npm install react-mult-transition-image-view

代码部分

import ImageBoxView from 'react-mult-transition-image-view'

 <ImageBoxView img="#你的图片#"/>

当然 你可以设置其他属性

<ImageBoxView
 width="320" // 
 height="200" // 宽高,会转化成 style 属性
 mode="style" // 使用 style 去显示图片(默认:img)
 img="#你要的图片#"/> // 图片路径

小图过渡到大图的效果

<ImageBoxView
 animate="fade" // 会触发动画样式(见下方样式部分 )
 mode="style" // 使用 style 去显示图片(默认:img)
 img={['#小图地址#', '#大图地址#']}/> // img 传入数组形式。

实现随机显示图片

当有很多图片的时候,可以让图片随机时间显示,增加图片显示出来的体验
(一起出来真的有点丑)

<ImageBoxView
 delay="100" // 延迟加载(默认:0),可以传入一个随机数
 img="#你要的图片#"/> // 图片路径

幻灯片效果

因为 img 属性可以传入数组,所以 理论上可以加载很多图,实现幻灯片效果。
使用 wait 属性 来设置,每张图片加载后的等待时间

<ImageBoxView
 animate="fade" // 会触发动画样式(见下方样式部分 )
 wait="100" // 每张图片加载完后,继续加载下一张的时间(默认:0)
 mode="style" // 使用 style 去显示图片(默认:img)
 img={['#图片1#', '#图片2#', '#图片3#']}/> // img 传入数组形式。

样式部分

别忘了样式部分

.c-img-box{
 display:inline-block;
 width: 320px;
 height: 200px;
 background: #f7f6f5;
 position: relative;
 .img-hold{
 overflow: hidden;
 background-size: cover;
 background-repeat: no-repeat;
 background-position: center;
 img{
  width:100%;
  height:100%;
 }
 &.img-animate{
  transition: opacity 0.5s;
 }
 }
 
 .img-cover{
 background: url('https://d.2dfire.com/om/images/menulist/7deb58da.default.png') no-repeat center/300px;
 background-color:#f0f0f0;
 }
 
 .img-cover,
 .img-hold,
 .img-hide{
 position: absolute;
 width: 100%;
 height: 100%;
 top:0;
 left:0;
 }
 
 .img-hide{
 opacity: 0;
 }
 
}

TODO

github: https://github.com/qilei0529/react-mult-transition-image-view

本地下载:http://xiazai.3water.com/201710/yuanma/react-mult-transition-image-view(3water.com).rar

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
数组Array进行原型prototype扩展后带来的for in遍历问题
Feb 07 Javascript
JS滚轮事件onmousewheel使用介绍
Nov 01 Javascript
深入理解JQuery keyUp和keyDown的区别
Dec 12 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
Apr 17 Javascript
javascript随机显示背景图片的方法
Jun 18 Javascript
JS拉起或下载app的实现代码
Feb 22 Javascript
JavaScript表单验证完美代码
Mar 02 Javascript
vue.js实现用户评论、登录、注册、及修改信息功能
May 30 Javascript
微信小程序组件传值图示过程详解
Jul 31 Javascript
vuex实现购物车功能
Jun 28 Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
Sep 11 Javascript
JavaScript数组常用的增删改查与其他属性详解
Oct 13 Javascript
ES6 javascript中class类的get与set用法实例分析
Oct 30 #Javascript
原生JS与jQuery编写简单选项卡
Oct 30 #jQuery
简单实现jQuery弹窗效果
Oct 30 #jQuery
Bootstrap栅格系统的使用详解
Oct 30 #Javascript
ES6 javascript中class静态方法、属性与实例属性用法示例
Oct 30 #Javascript
用React实现一个完整的TodoList的示例代码
Oct 30 #Javascript
JavaScript实现精美个性导航栏筋斗云效果
Oct 29 #Javascript
You might like
10个可以简化php开发过程的MySQL工具
2010/04/11 PHP
for循环连续求和、九九乘法表代码
2012/02/20 PHP
详细解读PHP的Yii框架中登陆功能的实现
2015/08/21 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
Javascript 的addEventListener()及attachEvent()区别分析
2009/05/21 Javascript
Javascript 日期处理之时区问题
2009/10/08 Javascript
jQuery 跨域访问问题解决方法
2009/12/02 Javascript
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
2012/10/11 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
2015/04/02 Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
2016/04/29 Javascript
jQuery动态增减行的实例代码解析(推荐)
2016/12/05 Javascript
概述一个页面从输入URL到页面加载完的过程
2016/12/16 Javascript
vue-resourse将json数据输出实例
2017/03/08 Javascript
微信小程序之页面跳转和参数传递的实现
2017/09/29 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
2020/07/22 Javascript
vue抽出组件并传值实例
2020/07/31 Javascript
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
[12:29]2018国际邀请赛 开幕秀
2018/08/22 DOTA
Python连接mssql数据库编码问题解决方法
2015/01/01 Python
python3 深浅copy对比详解
2019/08/12 Python
Django模板标签中url使用详解(url跳转到指定页面)
2020/03/19 Python
Python+unittest+DDT实现数据驱动测试
2020/11/30 Python
台湾深度自由行旅游平台:Tripbaa趣吧
2017/10/10 全球购物
新西兰最大、占有率最高的综合性药房:PharmacyDirect药房中文网
2020/11/03 全球购物
.NET笔试题(20个问题)
2016/02/02 面试题
如何从一个文件档案的尾端新增记录
2016/12/02 面试题
北京捷通华声语音技术有限公司Java软件工程师笔试题
2012/04/10 面试题
音乐学院硕士生的自我评价分享
2013/11/01 职场文书
社区优秀志愿者材料
2014/02/02 职场文书
护士自我鉴定怎么写
2014/02/07 职场文书
元旦活动感言
2014/03/08 职场文书
物业保安辞职信
2015/05/12 职场文书
演讲开场白和结束语
2015/05/29 职场文书
复兴之路纪录片观后感
2015/06/02 职场文书
无故旷工检讨书
2015/08/15 职场文书
浅谈Python数学建模之线性规划
2021/06/23 Python