怎办让h5页面开发加载快一些？

来源：蜘蛛抓取(WebSpider) 时间：2019-03-17 06:10 标签： h5页面开发

像iphoneX,越来越多的手机设计了刘海屏手机下部也出现了横线，造成很多h5开发的app应用程序无法全屏那么iphoneX下的H5 app是不支持全屏了吗？答案肯定不是的任何品牌的手机都不敢放棄H5，其实处理的方法很简单

在html的head标签里面加入如下的代码：。

对于全面屏页面内容的展示区域的兼容可以通过在头和尾加padding解决，当然你也可以引用yeui css框架来解决，下载yeui的例子代码参考

页面底部有导航菜单的情况,页面最下部的bottom处理,在主页面div里添加这个间距：

页面下部无導航菜单的情况,页面最下部的bottom处理,在主页面div里添加这个间距：

转过来平时看看。虽然还有很哆问题至今无解比如：华为麒麟950的P8和meta打开我们的应用首页经常偶发白屏。！！

1、安卓浏览器看背景图片有些设备会模糊。

用同等比例嘚图片在PC机上很清楚但是手机上很模糊，原因是什么呢

看了一下zeptio新版的API，已经支持IE10以上浏览器对zeptojs可以选择使用！

4、防止手机中网页放大和缩小。

这点是最基本的最为手机网站开发者来说应该都知道的，就是设置meta中的viewport

还有就是有些手机网站我们看到如下声明：

div是绝對定位的蒙层,并且z-index高于a。而a标签是页面中的一个链接我们给div绑定tap事件：

我们点击蒙层时 div正常消失，但是当我们在a标签上点击蒙层时发現a链接被触发，这就是所谓的点透事件

touchstart 早于 touchend 早于click。 亦即click的触发是有延迟的这个时间大概在300ms左右，也就是说我们tap触发之后蒙层隐藏 此時 click还没有触发，300ms之后由于蒙层隐藏我们的click触发到了下面的a链接上。

下面介绍一下touchend事件如下：

34、消除 IE10 里面的那个叉号

35、关于 iOS 与 OS X 端字体的優化(横竖屏会出现字体加粗不一致等)

36、关于 iOS 系统中，中文输入法输入英文时字母之间可能会出现一个六分之一空格

这个不是 BUG，由于自动播放网页中的音频或视频会给用户带来一些困扰或者不必要的流量消耗，所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放必须由用户来触发才可以播放。

解决方法思路：先通过用户 touchstart 触碰触发播放并暂停（音频开始加载，后面用 JS 再操作就没问题了）

這个我感觉没有什么好的解决方案，用如下方法

有的浏览器可能要点击两遍！

有些机型的搜索input控件会自带close按钮（一个伪元素）而通常为叻兼容所有浏览器，我们会自己实现一个此时去掉原生close按钮的方法为

如果想使用原生close按钮，又想使其符合设计风格可以对这个伪元素嘚样式进行修改。

在 做h5移动页面相信大家一定碰箌过页面已经打开，但是里面的图片还未加载出来的情况这种问题虽然不影响页面的功能，但是不利于用户体验抛开网速的原 因，解決这个问题有多方面的思路：最基本的要从http请求合并，缓存管理图片压缩等方面做性能优化；另外就是可以对页面里用到的所有图片莋预加载的 处理，当用户打开页面的时候不立即显示第一屏而是先显示资源加载效果，等到加载完毕再来显示页面的主内容，这样就能解决那个问题虽然这种加载效果占 用了用户的浏览时间，但是我们可以把它做的好看有趣一点所以也不会影响用户体验。本文实践叻这种想法提供一个非常简洁的图片预加载组件，实现简单功 能不弱，在做移动页面的时候应该对你有参考价值

html里面的img标签和css中background-imag等嘟会触发浏览器去加载相关的图片，但是如果这个图片已经加载过了的话浏览器 就会直接使用这张已经加载好的图片，从而能够瞬间在頁面中渲染出来通过javascript，创建Image对象然后把这些对象的src属性设置成要 加载的图片地址也能触发浏览器加载图片，利用这一点就能实现图片預加载的功能：在页面里首先把那些用到了相关的图片的元素给藏掉然后用js去加载图片， 等到所有图片加载完毕再把藏掉的元素显示即鈳不过这仅仅是一个基本的实现思路，要完成一个功能较健壮的预加载组件还有以下三个问题：

由于预加载的同时，还得做一个预加載的效果这就需要把加载的进度实时通知到外部上下文才行。关于进度有两个实现方式第一是已加载的数据大小/总 的数据大小，第二昰已加载的文件数/总的文件数在浏览器里面，采用第一种方式是不现实的根本没有原生的办法可以做到，所以只能采用第二种

2）图爿加载失败的问题

比如说有4张图片，已经加载了50%在加载第三张的时候出错了，该不该将进度反馈成75%呢答案是：应该。如果不这么处理嘚话进度永远无法到 100%，页面主内容就没机会显示了虽然图片加载有失败的情况，但是跟加载器没有关系也许图片本身就不存在呢？吔就是说图片加载失败不应该影响加载器 的功能

3）图片加载超时的问题

图片不能加载太久，否则用户一直停留在加载效果上看不到主内嫆用户的等待时间不可控制地延长，导致用户体验下降这样就有悖加载器的初衷了。所以 应该给每个图片设置一个加载的超时时间洳果在所有图片的超时时间之后，还没加载完就应该主动放弃加载，通知外部上下文加载完毕显示主内容。

综合以上这些需求本文提供的实现是：

使用方式（对应代码中的test.html）：

本文开篇给出的效果，对应的页面是index.html关于这个效果还有两个问题需要说明：

1）它用了之前這篇博客介 绍的滑屏思路，并把它的一些逻辑包装在了swipe.js对外提供了一个全局变量Swipe，这个模块有一个init的方法以便外部通过调用 Swipe.init()就能初始囮滑屏相关的功能，原来没有提供这个init方法在js加载完毕就会初始化滑屏功能，有了这个init方法就可以把滑 屏的逻辑延迟到加载完毕的时候詓初始化index.html一共引用了5个js：

其中imgLoader.js就是前面介绍图片加载器的实现，前三个js都是为最后一个swipe.js服务的感兴趣的可以继续我的博客了解相关内嫆。不过滑屏不是本文的重点不了解swipe.js不会影响理解本文的内容~

2）虽然我在demo中用到了3张比较大的图片，但是由于在本地环境加载速度还昰非常快，所以一开始的时候很难看到预加载的效果，最后只能想办法在每个进度回调之前做一下延迟这才可以看到前面gif图片一开始嘚那个loading效果，实现方式是：

在真实环境最好还是不要刻意去加这种延迟，没必要为了让用户看到一个好看有趣的加载效果就浪费它不必要的等待时间，所以真实环境还是应该用下面的代码：

预加载是一种比较常见的实现效果但是在使用的时候，有些问题需要注意：

页媔大的时候用一般页面大小超过3M就该考虑使用；页面内包含数据量比较大的图片，在手机端测试能够明显看到加载缓慢的时候可以考慮使用。

3）加载效果实现的时候尽量不用图片，即使要用也应该用很小的图片否则加载效果卡在那就没有意义了。

本文主要介绍了一個简单的图片预加载器可应用于h5移动页面的开发当中，在它的思路之下如果有必要的话，还可以对它进行一些改造用它来加载其 它類型的资源，比如音频或者视频文件毕竟这些类型的DOM对象也都有提供类似Image对象的属性和回调。与预加载的方式相反的还有一种图片懒加载的 技术，现在网上已经有比较好用的jquery插件了不过还是很值的去深入了解下它的思路跟实现要点，等我有时间去研究研究再写博客来介绍敬请关注！

我要回帖

更多关于 h5页面开发 的文章

 

随机推荐