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 相关文章推荐
如何将一个String和多个String值进行比较思路分析
Apr 22 Javascript
jquery实现效果比较好的table选中行颜色
Mar 25 Javascript
用js的document.write输出的广告无阻塞加载的方法
Jun 05 Javascript
Jquery实现的简单轮播效果【附实例】
Apr 19 Javascript
jQuery each函数源码分析
May 25 Javascript
Express URL跳转(重定向)的实现方法
Apr 07 Javascript
Vue全家桶实践项目总结(推荐)
Nov 04 Javascript
对node.js中render和send的用法详解
May 14 Javascript
JS实现简易留言板特效
Dec 23 Javascript
vue实现简单瀑布流布局
May 28 Javascript
解决Antd 里面的select 选择框联动触发的问题
Oct 24 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 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
php面向对象全攻略 (十) final static const关键字的使用
2009/09/30 PHP
php checkbox 取值详细说明
2010/08/19 PHP
去掉destoon资讯内容页keywords关键字自带的文章标题的方法
2014/08/21 PHP
分享php分页的功能模块
2015/06/16 PHP
PHP+Mysql+jQuery查询和列表框选择操作实例讲解
2015/10/22 PHP
个人总结的一些关于String、Function、Array的属性和用法
2007/01/10 Javascript
离开页面时检测表单元素是否被修改,提示保存的js代码
2010/08/25 Javascript
基于JQuery的asp.net树实现代码
2010/11/30 Javascript
JS前端框架关于重构的失败经验分享
2013/03/17 Javascript
JavaScript回调(callback)函数概念自我理解及示例
2013/07/04 Javascript
JavaScript将相对地址转换为绝对地址示例代码
2013/07/19 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
2013/12/26 Javascript
Node.js实现Excel转JSON
2015/04/24 Javascript
js去除浏览器默认底图的方法
2015/06/08 Javascript
jQuery操作动态生成的内容的方法
2016/05/28 Javascript
JS简单随机数生成方法
2016/09/05 Javascript
KVM虚拟化技术之使用Qemu-kvm创建和管理虚拟机的方法
2016/10/05 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
2016/12/18 Javascript
js实现开启密码大写提示
2016/12/21 Javascript
vue loadmore组件上拉加载更多功能示例代码
2017/07/19 Javascript
Vue 的 v-model用法实例
2020/11/23 Vue.js
python pandas 对series和dataframe的重置索引reindex方法
2018/06/07 Python
python查看模块安装位置的方法
2018/10/16 Python
Python‘==‘ 及 ‘is‘相关原理解析
2020/09/05 Python
以色列的身体护理及家居香薰品牌:Sabon NYC
2018/02/23 全球购物
日本热销NO.1胶原蛋白冻:Aishitoto爱希特多
2019/06/20 全球购物
中医药大学市场营销专业自荐信
2013/09/29 职场文书
自动化职业生涯规划书范文
2014/01/03 职场文书
公司端午节活动方案
2014/02/04 职场文书
生产部厂长助理职位说明书
2014/03/03 职场文书
新颖的化妆品活动方案
2014/08/21 职场文书
毕业论文致谢词
2015/05/14 职场文书
公司人力资源管理制度
2015/08/05 职场文书
2015年幼儿园班主任个人工作总结
2015/10/22 职场文书
SSM VUE Axios详解
2021/10/05 Vue.js
Mysql 如何合理地统计一个数据库里的所有表的数据量
2022/04/18 MySQL