我有一个包含许多按钮的主页。当按下按钮时,目标页面将作为该主页上 div 中的对象加载,其中 target 是要在对象中显示的页面。
<script>
.... check which button is pressed and assign path to target
var objectContent = "<object type=\"text/html\" data=\"" + target + "\" height=\"500px\" width=\"100%\" style=\"overflow:auto; min-height:400px;\"></object>";
document.getElementById('content').innerHTML = objectContent;
</script>
html
<div id='content'>
</div>
一切正常,目标页面在主页 div 中加载正常。
有时加载内容可能需要一段时间,所以我会使用加载 gif。我一直在整个页面上使用一个,但我只想在 div 中的内容上使用一个。
在目标页面中,我有以下内容来显示加载器:
<script>
$(".loader").fadeIn("fast");
</script>
并且在页面加载后隐藏它
<script>
$(document).ready(function(){
$(".loader").hide();
});
</script>
这是行不通的。该页面加载正常但没有加载 gif。没有错误。
如果我在浏览器中进行调试,我会在单步执行时看到 gif,因此它一定正在加载和隐藏,但在我正常加载页面时不会。我怀疑它加载得太晚或隐藏得太早。
我的 javascript 是否会在页面开始加载时立即显示加载器?我把它放在正文的开头。
或者我正在做些什么来在页面完全加载之前隐藏它?无论哪种方式,任何人都可以看到我做错了什么吗?
更新和回答
在object标签中添加onload如下:
var out = "<object ... onload=\"contentLoaded(this)\"></object>";
<script>
function contentLoaded() {
$(".loader").hide();
};
</script>
最佳答案
那为什么不将 .loader
元素留空并做这样的事情
$('.loader').fadeIn('fast').html('<img src="loading.gif" />');
还有这个
$('.loader').hide().html('');
关于javascript - 在 html 对象中显示加载 gif,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39237491/