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方法修改隐藏属性为显示)。
当然,你还可以根据你自己的逻辑写一些加载动画什么的,效果会更好。