编辑:我创建了一个小提琴来显示加载时间的不同(忽略任何视觉css错误:p)https://jsfiddle.net/ayygn8ft/1/
之前有没有人遇到过这种行为?考虑我有以下HTML文件:
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/viewer.css">
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
</head>
<body>
<!-- IMPORTANT CODE SECTION IS RIGHT HERE -->
<button class="btn waves-effect waves-light bracket-button not-transition">
Click Me
</button>
<div id="frame-overlay" class="scale-transition scale-out card">
<iframe id="frame" src=""></iframe>
<div class="loader">Loading...</div>
</div>
<!-- END IMPORTANT CODE SECTION -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script src="js/viewer.js"></script>
</body>
</html>
请注意,我已预先定义了一个ID为#frame
的iframe。现在我的JS里面有:
$(document).ready(function() {
var showGG = false;
$('.bracket-button').click(function() {
showGG = !showGG;
if (showGG) {
$('#frame-overlay').removeClass('scale-out');
// Set source
$('#frame').attr('src', source);
$('#frame').show();
} else {
$('#frame-overlay').addClass('scale-out');
// Remove source
$('#frame').attr('src', '');
$('.loader').show();
}
});
});
上面的代码有效,但加载iframe的速度很慢。我发现如果我改为删除初始框架,并且动态地追加/删除iframe,它会很快加载:
if (showGG) {
$('#frame-overlay').removeClass('scale-out');
$('#frame-overlay').append('<iframe id="frame" src="' + source + '"></iframe>')
$('#frame').show();
} else {
$('#frame-overlay').addClass('scale-out');
// Remove source
$('#frame').remove();
$('.loader').show();
}
为什么添加和删除iframe的负载比设置源的速度快得多?我最初的印象是设置源会更快,但它似乎不是这样。