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 相关文章推荐
jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
Oct 20 Javascript
javascript innerHTML使用分析
Dec 03 Javascript
JS限制上传图片大小不使用控件在本地实现
Dec 19 Javascript
javascript自动切换焦点控制效果完整实例
Feb 02 Javascript
JS中使用 after 伪类清除浮动实例
Mar 01 Javascript
vue模板语法-插值详解
Mar 06 Javascript
create-react-app构建项目慢的解决方法
Mar 14 Javascript
《javascript少儿编程》location术语总结
May 27 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
Aug 08 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
Nov 27 Javascript
JavaScript创建防篡改对象的方法分析
Dec 30 Javascript
jquery实现的分页显示功能示例
Aug 23 jQuery
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制作中间带自己定义图片二维码的方法
2014/01/27 PHP
thinkphp3.2.2实现生成多张缩略图的方法
2014/12/19 PHP
yii2学习教程之5种内置行为类详解
2017/08/03 PHP
this[] 指的是什么内容 讨论
2007/03/24 Javascript
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
2010/08/16 Javascript
jQuery源码分析-01总体架构分析
2011/11/14 Javascript
jQuery中ready事件用法实例
2015/01/19 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
2015/05/04 Javascript
vue自定义指令实现v-tap插件
2016/11/03 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
2016/11/29 Javascript
JS限定手机版中图片大小随分辨率自动调整的方法
2016/12/05 Javascript
VueRouter导航守卫用法详解
2017/12/25 Javascript
JS前端基于canvas给图片添加水印
2020/11/11 Javascript
python通过ftplib登录到ftp服务器的方法
2015/05/08 Python
Python字符串特性及常用字符串方法的简单笔记
2016/01/04 Python
Python解析json文件相关知识学习
2016/03/01 Python
numpy使用fromstring创建矩阵的实例
2018/06/15 Python
python3.4 将16进制转成字符串的实例
2019/06/12 Python
Python 实现毫秒级淘宝抢购脚本的示例代码
2019/09/16 Python
python机器学习库xgboost的使用
2020/01/20 Python
HTML5无刷新改变当前url的代码
2017/03/15 HTML / CSS
Html5踩坑记之mandMobile使用小记
2020/04/02 HTML / CSS
澳大利亚领先的睡衣品牌:Peter Alexander
2016/08/16 全球购物
英国高街品牌:Miss Selfridge(塞尔弗里奇小姐)
2016/09/21 全球购物
天猫国际进口超市直营:官方直采,一站购齐
2017/12/11 全球购物
伦敦哈德森鞋:Hudson Shoes
2018/02/06 全球购物
C#面试问题
2016/07/29 面试题
酒店办公室文员岗位职责
2013/12/18 职场文书
汽车维修专业个人求职信范文
2014/01/01 职场文书
技能竞赛活动方案
2014/02/21 职场文书
2015年学校信息技术工作总结
2015/05/25 职场文书
单身证明范本
2015/06/15 职场文书
安全生产会议制度
2015/08/06 职场文书
MySQL高级进阶sql语句总结大全
2022/03/16 MySQL
Python实现文字pdf转换图片pdf效果
2022/04/03 Python
Python使用DFA算法过滤内容敏感词
2022/04/22 Python