官网改版项目问题总结

最近官网改版的任务交给了我，开发使用的是jq操作dom，后台php渲染的方式，如今已经开发完成，现在把一些问题记录下来，已备忘。

1、Safari浏览器不能自动播放视频

这次官网首页是有一个内嵌视频，正常情况下给video标签加上autoplay属性就能加载完自动播放了，但是实际发现Safari不会，查询了解到新版Safari禁用了自动播放，解决办法就是手动写行代码video.play();就解决了。

2、移动端浏览器对video标签兼容不好

在查看移动端效果的时候，发现多个浏览器对video标签做了自动置顶，也就是跳出正常布局，显示在页面最顶层，而且就算不置顶，当点击播放以后也会跳出布局，后来我在网上查了很多资料，也想了很多办法，由于我用的原生的video标签，所以考虑使用video.js等几个有名的第三方库试试，结果并不令人满意，这些库在pc端很完美，但是移动端并不理想，而我苦苦寻找没有发现有效的解决办法，最后和UI商量用gif代替了mp4。

3、首页视频加载慢的优化方案

在pc端，由于视频有4M，加载完成之前，视频区域会产生空白，移动端gif也很大，也有同样问题，于是选择在页面开始加载占位图，等待MP4加载完成或GIF加载完成后再展示。

这里有个细节，由于页面是后台渲染，所以用户在页面间跳转的时候实际是刷新了页面，这时候为了利用缓存，我们要区分用户首次加载页面和刷新页面这两种操作。

针对video，

http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp

我这里选择了canplay事件，当canplay调用时，表示视频已经加载完成准备好播放了，此时我隐藏占位图，展示video标签并播放。

用户刷新或跳回首页时，我希望利用的是之前的缓存视频，怎么确定视频已经缓存了呢，我尝试了多个video状态，没有找到，于是我觉得用sessionStorage 自己存一个状态（不过后来我发现没有意义）

而针对image，

https://www.runoob.com/jsref/dom-obj-image.html 我需要用到onload事件和complete状态

onload表示首次加载完成，当用户刷新浏览器启用图片缓存时，image的onload事件不会再走，这时候我们可以根据image的complete来作为执行操作的节点。

具体代码如下

 var gif = document.getElementsByClassName('logo-mobile')[0]var myVid = document.getElementById('video');if (IsPC()) {if (window.sessionStorage.getItem('v-ok') == 1) {console.log('视频已缓存')logo1.hide()logo2.show()myVid.play()} else {myVid.oncanplay = function () {console.log('首次进入PC')window.sessionStorage.setItem('v-ok', 1)logo2.show()myVid.play()logo1.hide()}}} else {gif.onload = function () {console.log('首次进入移动端')logo1.hide()logo3.show()}if (gif.complete) {console.log('gif已缓存')logo1.hide()logo3.show()} else {logo3.hide()logo1.show()}}

其中这里window.sessionStorage.getItem('v-ok') == 1这个判断如果不需要在这里做一些操作可以不要。因为刷新也会发走video的canplay事件。

4、多语言适配

这里才用的方案是i18next.js ，链接https://www.i18next.com/，中文文档不全，有一些小坑，不过总体还是蛮好用的。

5、左侧菜单随着右侧内容高度变化跟着变化

这个主要是适配问题，还蛮麻烦的，类似于这种https://www.tencent.com/zh-cn/system.html，当小屏电脑比如macbook air 会出现遮挡问题，这里也是参考了腾讯的处理方式，学习到了。

暂时能拿出来说的就这些，仅作记录。

转载于:https://www.cnblogs.com/wuyuchao/p/11163097.html

官网改版项目问题总结相关推荐

Spring官网改版后下载方式
2019独角兽企业重金招聘Python工程师标准>>> Spring官网改版后,很多项目的完整zip包下载链接已经隐掉了,虽然Spring旨在引导大家用更"高大上" ...
Spring官网改版后下载
Spring官网改版后下载 Spring官网改版后找了好久都没有找到直接下载Jar包的链接,下面汇总些网上提供的方法,亲测可用. 1.直接输入地址,改相应版本即可:http://repo.spring ...
Istio 1.10 发布及官网改版
本文译自 Istio 官方文档 [1],有部分修改. 北京时间 5 月 19 日,我们很高兴地宣布 Istio 1.10 的发布!我们要特别感谢我们的发布经理 Sam Naser[2] 和张之晗 [ ...
分析大咖说：做一个转化率提升 2% 的成功官网改版案例
获客拉新在产品发展的中早期一直是市场和运营日常工作中非常重要的工作之一,活动落地页的设计对于一款互联网产品来说,重要性不言而喻. 由于每一个产品所处的行业.营销活动目的.公司资源各不相同,落地页的改版 ...
表单内如何直接贴图而不用上传图片_重磅更新｜偷偷告诉你，表单大师官网改版啦啦啦啦...
你们心心念念的版本更新终(ke)于(suan) 来了(!) 昨天表单大师新版本悄咪咪的上线啦,相信眼尖的小伙伴们已经发现官网首页大变样~偷偷告诉你们哦,本次不仅仅只有更新,还上线了许多便宜好用的 ...
精雕细琢与强大工具箱组合卓越结晶-2017版逐浪CMS官网改版感言
阅前提示: 这是一篇纯技术的干货文章,没有什么艺术性可言,而且为了考虑方便用户,诸多技术细节采用流水帐的记录,以利开发者,闲人慎入! 第一部份:架构篇用什么样的架构开发,用什么样的布局,就如同画家作 ...
activiti官网实例项目activiti-explorer之扩展流程节点属性
节点中添加"关联表单"属性 1,stencilset.json中加入如下代码 , { "name" : "approveTypepackage ...
3.odoo13之跟着官网做项目/实例（模型关联，模型类模型表的关联）
1.建立房地产属性类型的表还是在models中的estate_property.py中, 并且添加关联,让房地产表和属性表关联起来, 并且加上买方和销售人员,默认系统的模型表, 完整estate_p ...
2.odoo13之跟着官网做项目/实例（创建菜单，创建action，创建视图、搜索过滤器，分组）
目录 1.创建菜单 2.创建动作,action 3.运行程序,创建数据 4.添加自定义列表视图(树视图) 5.添加表单视图 6.添加搜索视图 7.搜索视图的过滤器,以及搜索分组 1.创建菜单在vie ...

官网改版项目问题总结

官网改版项目问题总结相关推荐

最新文章

热门文章