移动端跳转服务端的H5页面的懒加载效果（前后端未分离）

最新推荐文章于 2023-06-08 15:47:23 发布

言一木

最新推荐文章于 2023-06-08 15:47:23 发布

阅读量1k

点赞数

分类专栏：移动端前端文章标签： webApp 加载

本文链接：https://blog.csdn.net/weixin_37769855/article/details/94741746

版权

前端同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

移动端

0 篇文章 0 订阅

订阅专栏

最近在开发一个WebApp，思路很简单，就是用Hbuild做一个移动端的壳，再从这个壳跳转到服务端的页面（使用location.href，存在跨域）
开发过程中碰到一个问题，首次安装后跳转到服务端的页面需要加载css和js缓存，而这个过程可能需要耗时数秒钟，如果直接展示一个空白页的话用户体验不好。所以打算给这个壳的index页面加一个懒加载效果，但是由于使用location.href，跳转过程中大部分的动态效果（css跟动图）都处于卡顿状态，给人的感官极差。最后想了个折中的方案，通过iframe内嵌跳转页面，加载完成再进行展示，代码如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1  maximum-scale=1 user-scalable=no">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="HandheldFriendly" content="True">
<title>welcome</title>
<link rel="stylesheet" href="css/materialize.css">
<script src="js/jquery.min.js"></script>
<style>
body {
 margin: 0px;
 }
iframe {
border: 0px;
}
</style>
</head>
<body scroll="no">
<div class="container" id="container">
	<div class="section" style="padding-top: 10rem;">
	
	  <div class="row">
	    <div class="col s12 m4">
	    </div>
	
	    <div class="col s12 m4">
	      <div class="icon-block">
				<h2 class="center light-blue-text"><img src="img/profile.gif" alt="" class="z-depth-5" style="border-radius:0px;border: 0;width: 150px;    height: 150px;"></h2>
				<p class="center light">Just a moment......</p>
	      </div>
	    </div>
	
	    <div class="col s12 m4">
	    </div>
	  </div>
	
	</div>
</div>

<!--style="visibility: hidden"-->
<iframe id="iframe" name="iframe" frameborder="0" style="visibility: hidden" width="100%" height="100%" scrolling="auto"
src="http://134.175.153.50/trunk/index"></iframe> 
</body>
	<script type="text/javascript">
		$(function () {
			$("#iframe").load(function () {
				this.style.height=document.body.clientHeight;
				if($("#iframe").is(':visible')){
					$("#container").remove();
					$("#iframe").css("visibility","");
				}
			});
		});
	</script>
</html>

直接使用Hbuild开发前端页面就不会出现这类问题，但是由于目前项目还未改造成前后端分离的结构，所以只能采用这种写法

言一木

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端跳转服务端的H5页面的懒加载效果（前后端未分离）

最近在开发一个WebApp，思路很简单，就是用Hbuild做一个移动端的壳，再从这个壳跳转到服务端的页面（使用location.href，存在跨域）开发过程中碰到一个问题，首次安装后跳转到服务端的页面需要加载css和js缓存，而这个过程可能需要耗时数秒钟，如果直接展示一个空白页的话用户体验不好。所以打算给这个壳的index页面加一个懒加载效果，但是由于使用location.href，跳转过程中大...
复制链接

扫一扫