html让iframe加载更流畅

iframe在访问的时候因为访问url需要一段时间,所以会造成短暂时间的空白,使用此方式可以让你的iframe避免出现短暂的空白,看起来更流畅。

<iframe style="visibility:hidden;" onload="this.style.visibility = 'visible';" src="https://www.codeku.run"></iframe>

效果如图:

这里我写了两个iframe以做比对。

完整源码:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
	<style>
		iframe{
			width: 100%;
			height: 50vh;
		}
	</style>
</head>
<body>
	<iframe style="visibility:hidden;" onload="this.style.visibility = 'visible';" src="https://www.codeku.run"></iframe>
	<iframe name="iframe" src="https://www.codeku.run"></iframe>
</body>
</html>

原理解释

给iframe添加了一个visibility隐藏属性,当iframe访问url的时候隐藏,只有在url加载完成了显示(调用onload方法修改隐藏属性为显示)。

当然,你还可以根据你自己的逻辑写一些加载动画什么的,效果会更好。

人已赞赏
实用片段

提交数据给iframe

2020-4-25 13:55:43

实用片段

html标签完全阻止搜索引擎抓取网站

2020-4-25 14:20:07

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索