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 相关文章推荐
javascript操作cookie的文章(设置,删除cookies)
Apr 01 Javascript
非常有用的40款jQuery 插件推荐(系列二)
Dec 25 Javascript
jQuery focus和blur事件的应用详解
Jan 26 Javascript
node.js中的console用法总结
Dec 15 Javascript
不用一句js代码初始化组件
Jan 27 Javascript
jquery+ajax实现直接提交表单实例分析
Jun 17 Javascript
JS button按钮实现submit按钮提交效果
Nov 01 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
Feb 24 Javascript
vue 如何添加全局函数或全局变量以及单页面的title设置总结
Jun 01 Javascript
jQuery.form.js的使用详解
Jun 14 jQuery
webpack项目调试以及独立打包配置文件的方法
Feb 28 Javascript
ES6的异步操作之promise用法和async函数的具体使用
Dec 06 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中的实现trim函数代码
2007/03/19 PHP
PHP中用header图片地址 简单隐藏图片源地址
2008/04/09 PHP
免费手机号码归属地API查询接口和PHP使用实例分享
2014/04/10 PHP
codeigniter框架The URI you submitted has disallowed characters错误解决方法
2014/05/06 PHP
PHP中preg_match正则匹配中的/u、/i、/s含义
2015/04/17 PHP
PHP按指定键值对二维数组进行排序的方法
2015/12/22 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
PHP闭包定义与使用简单示例
2018/04/13 PHP
css动画效果之animation的常用样式
2021/03/09 HTML / CSS
快速保存网页中所有图片的方法
2006/06/23 Javascript
IE与FireFox的兼容性问题分析
2007/04/22 Javascript
JQuery 前台切换网站的样式实现
2009/06/22 Javascript
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
2013/04/08 Javascript
js格式化金额可选是否带千分位以及保留精度
2014/01/28 Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
2014/05/11 Javascript
js实时获取并显示当前时间的方法
2015/07/31 Javascript
Bootstrap每天必学之弹出框(Popover)插件
2016/04/25 Javascript
jquery动态切换背景图片的简单实现方法
2016/05/14 Javascript
Node.js 日志处理模块log4js
2016/08/28 Javascript
Vue监听数据对象变化源码
2017/03/09 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
2017/06/13 Javascript
解决vue router使用 history 模式刷新后404问题
2017/07/19 Javascript
解决vue中监听input只能输入数字及英文或者其他情况的问题
2018/08/30 Javascript
Python遍历文件夹和读写文件的实现方法
2017/05/10 Python
python使用tensorflow深度学习识别验证码
2018/04/03 Python
使用Pyhton 分析酒店针孔摄像头
2020/03/04 Python
python3 使用traceback定位异常实例
2020/03/09 Python
HTML5单页面手势滑屏切换原理分析
2017/07/10 HTML / CSS
你在项目中用到了xml技术的哪些方面?如何实现的?
2014/01/26 面试题
this关键字的作用
2016/01/30 面试题
高中生活自我鉴定
2014/01/18 职场文书
《老王》教学反思
2014/02/23 职场文书
俄语专业毕业生求职信
2014/07/12 职场文书
党员演讲稿
2014/09/04 职场文书
Python Django搭建文件下载服务器的实现
2021/05/10 Python
教你怎么用Python操作MySql数据库
2021/05/31 Python