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 相关文章推荐
JSON 教程 json入门学习笔记
Sep 22 Javascript
JQuery-tableDnD 拖拽的基本使用介绍
Jul 04 Javascript
js中的preventDefault与stopPropagation详解
Jan 29 Javascript
纯js实现div内图片自适应大小(已测试,兼容火狐)
Jun 16 Javascript
js简单抽奖代码
Jan 16 Javascript
JS DOM实现鼠标滑动图片效果
Sep 17 Javascript
JS简单随机数生成方法
Sep 05 Javascript
Javascript 获取鼠标当前的位置实现方法
Oct 27 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
Jun 06 Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
Mar 06 Javascript
Vue 实现分页与输入框关键字筛选功能
Jan 02 Javascript
Vue——前端生成二维码的示例
Dec 19 Vue.js
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
织梦模板标记简介
2007/03/11 PHP
php三维数组去重(示例代码)
2013/11/26 PHP
php数组添加与删除单元的常用函数实例分析
2015/02/16 PHP
PHP Warning: Module 'modulename' already loaded in问题解决办法
2015/03/16 PHP
php制作文本式留言板
2015/03/18 PHP
php实现的SSO单点登录系统接入功能示例分析
2016/10/12 PHP
Yii2――使用数据库操作汇总(增删查改、事务)
2016/12/19 PHP
Yii2.0实现生成二维码功能实例
2017/10/24 PHP
YUI 读码日记之 YAHOO.lang.is*
2008/03/22 Javascript
jquery 锁定弹出层实现代码
2010/02/23 Javascript
js加入收藏以及使用Jquery更改透明度
2014/01/26 Javascript
html的DOM中Event对象onblur事件用法实例
2015/01/21 Javascript
jquery实现点击页面计算点击次数
2015/01/23 Javascript
jquery实现简单合拢与展开网页面板的方法
2015/09/01 Javascript
jquery实现两边飘浮可关闭的对联广告
2015/11/27 Javascript
跨域资源共享 CORS 详解
2016/04/26 Javascript
JS把内容动态插入到DIV的实现方法
2016/07/19 Javascript
详解js中Number()、parseInt()和parseFloat()的区别
2016/12/20 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
2017/02/09 Javascript
浅谈js中的this问题
2017/08/31 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
2018/01/25 Javascript
iview实现动态表单和自定义验证时间段重叠
2021/01/10 Javascript
编写自定义的Django模板加载器的简单示例
2015/07/21 Python
详解 Python 与文件对象共事的实例
2017/09/11 Python
python训练数据时打乱训练数据与标签的两种方法小结
2018/11/08 Python
几个适合python初学者的简单小程序,看完受益匪浅!(推荐)
2019/04/16 Python
把django中admin后台界面的英文修改为中文显示的方法
2019/07/26 Python
Python实现扫码工具的示例代码
2020/10/09 Python
5分钟实现Canvas鼠标跟随动画背景
2019/11/18 HTML / CSS
25道Java面试题集合
2013/05/21 面试题
土木工程专业个人求职信
2013/12/05 职场文书
英语教学随笔感言
2014/02/20 职场文书
出国留学计划书
2014/04/27 职场文书
活动总结报告范文
2014/05/04 职场文书
2014年酒店服务员工作总结
2014/12/08 职场文书
项目建议书
2015/02/04 职场文书