javascript - 在 html 对象中显示加载 gif

Question

我有一个包含许多按钮的主页。当按下按钮时，目标页面将作为该主页上 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>

Answer 1

那为什么不将 .loader 元素留空并做这样的事情

$('.loader').fadeIn('fast').html('<img src="loading.gif" />');

还有这个

$('.loader').hide().html('');