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 相关文章推荐
用JavaScrpt实现文件夹简单轻松加密的实现方法图文
Sep 08 Javascript
基于jquery实现的移入页面上空文本框时,让它变为焦点,移出清除焦点
Jul 26 Javascript
jQuery EasyUI API 中文文档 - DataGrid数据表格
Nov 17 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
Nov 20 Javascript
JavaScript实现Flash炫光波动特效
May 14 Javascript
js中class的点击事件没有效果的解决方法
Oct 13 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
Jan 13 Javascript
Vue.JS项目中5个经典Vuex插件
Nov 28 Javascript
vue页面加载闪烁问题的解决方法
Mar 28 Javascript
vue实现动态显示与隐藏底部导航的方法分析
Feb 11 Javascript
elementUI select组件默认选中效果实现的方法
Mar 25 Javascript
详解微信小程序获取当前时间及日期的方法
Apr 28 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
php 静态化实现代码
2009/03/20 PHP
PHP 开源框架22个简单简介
2009/08/24 PHP
PHP中Date()时间日期函数的使用方法小结
2011/04/20 PHP
php开发留言板的CRUD(增,删,改,查)操作
2012/04/19 PHP
PHP下SSL加密解密、验证、签名方法(很简单)
2020/06/28 PHP
Yii2实现同时搜索多个字段的方法
2016/08/10 PHP
Zend Framework入门教程之Zend_Session会话操作详解
2016/12/08 PHP
IE与Firefox下javascript getyear年份的兼容性写法
2007/12/20 Javascript
JavaScript获取FCK编辑器信息的具体方法
2013/07/12 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
2015/07/27 Javascript
swtich/if...else的替代语句
2015/08/16 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
2015/08/22 Javascript
Web前端开发工具——bower依赖包管理工具
2016/03/29 Javascript
JavaScript记录光标在编辑器中位置的实现方法
2016/04/22 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
2016/08/16 Javascript
深入理解Node.js 事件循环和回调函数
2016/11/02 Javascript
微信小程序 WebSocket详解及应用
2017/01/21 Javascript
详解Angular4中路由Router类的跳转navigate
2017/06/09 Javascript
Vue中封装input组件的实例详解
2017/10/17 Javascript
Vue基于NUXT的SSR详解
2017/10/24 Javascript
ng-events类似ionic中Events的angular全局事件
2018/09/05 Javascript
js+html5 canvas实现ps钢笔抠图
2019/04/28 Javascript
python操作xlsx文件的包openpyxl实例
2018/05/03 Python
Django 实现购物车功能的示例代码
2018/10/08 Python
Python时间和字符串转换操作实例分析
2019/03/16 Python
python 采用paramiko 远程执行命令及报错解决
2019/10/21 Python
英国家庭珠宝商:T. H. Baker
2018/02/08 全球购物
德国户外装备、登山运动和攀岩商店:tapir store
2020/02/12 全球购物
会计与审计专业大专生求职信
2013/10/03 职场文书
大学生创业计划书的范文
2014/01/07 职场文书
李敖北大演讲稿
2014/05/24 职场文书
音乐兴趣小组活动总结
2014/07/07 职场文书
2015年教师见习期工作总结
2015/05/20 职场文书
结婚仪式主持词
2015/06/29 职场文书
优秀学生主要事迹怎么写
2015/11/04 职场文书
uniapp引入支付宝原生扫码插件步骤详解
2022/07/23 Javascript