H5 过渡页Loading效果总结

[shiiiiiiji]

随着 H5 的普及，各种 CSS 3 动画及 JS 特效在网页中层出不穷，PC端载入速度还可以，移动端则相对要慢很多，如果图片或脚本没有完全载入，用户在操作中可能会发生各种问题。因此我们需要对数据载入进行侦测，以更加人性化的方式给用户展现。

以下总结实现的一些现成好看的资源和涉及的相关逻辑：

效果资源

• 很不错的在线loading效果网站资源，loading.io（可生成gif、svg以及CSS 3 代码）

相关逻辑处理

• 加载状态事件：document.onreadystatechange - 页面加载状态改变时的事件
• 获取当前文档的加载状态：document.readyState
  • uninitialized - 还未开始载入
  • loading - 载入中
  • interactIve - 已加载，文档与用户可以开始交互
  • complete - 载入完成

参考

• https://www.imooc.com/learn/858