Traveller 项目介绍
内容介绍:
以 VR旅行体验 为主要内容的网站。
(VR旅行体验以视频方式为主,图文结合为辅助,联合达人旅游,增加视频的故事性、知识性、趣味性。)
技术介绍:
PC端:
1.HTML、CSS、Javascript
2.JQuery
3.React
4.Less
5.Gulp 前端自动化工具 压缩CSS和图片
6.多种css3,特殊样式、伪元素、动画效果。
7.引入Web font字体集,采用矢量文字小图标,减少碎图片请求,文字库为:阿里巴巴图标库(MIT开源)
8.前端SEO
9.动态读取JSON数据,并使用React动态渲染,虚拟DOM渲染效率高,不影响之前已渲染未变化的DOM元素。
10.Html5:Web存储功能,利用sessionStorage存储一个会话期间内的用户信息
11.三重缓冲加载机制:
1.加载封面,遮蔽封面后内容,在封面加载完成后,通过给<script>标签设置src的方法加载后续内容。
2.后续JSX文件内容加载时,通过$.getJSON的方式,逐步加载内容区内容,先加载轮播图内容,再加载侧边栏内容,再加载显示卡片内容。(为了突出逐步加载的过程,已经添加延时效果)
3.图片资源延迟加载,通过jquery.lazyload插件延迟请求图片数据。
移动端: 1.分辨率适配,试用meta标签、flex流式布局、百分比布局解决屏幕适配问题,本页面从IPhone4(320480)至IPad(7261024)进行适配测试。 2.移动端特殊样式处理:媒体查询、弹性图片、rem相对单位、单行与多行文本溢出 3.使用fastclick.js解决300ms点击延迟及点透问题。 4.使用JSON动态加载数据,图片资源延迟加载 5.按钮点击态的设计 6.使用iSlider插件设计循环滚动轮播图 7.使用Chrome进行模拟测试,使用DebugGap配合手机进行真机测试 8.利用navigator.userAgent判断浏览器类型,自动跳转到相应网页 9.使用window.name的跨域能力解决PC页面默认自动跳转到手机端的问题 10.针对浏览器版本进行兼容:PC端最近的两个版本,Android>=4.0 IOS>=7