显示在html对象中加载gif

我有一个主页面，有很多按钮。当按下按钮时，目标页面将作为此主页面上的div内的对象加载，其中目标是要在对象内显示的页面。显示在html对象中加载gif

<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>

各项工作和目标页面加载主网页专区内的罚款。

有时可能需要一段时间来加载内容，所以我会利用加载gif。我一直在整个页面上使用一个，但我想只在div内的内容。

在目标页面，我有以下显示装载机：

<script> 
    $(".loader").fadeIn("fast"); 
</script>

，一旦页面加载

<script> 
    $(document).ready(function(){ 
     $(".loader").hide(); 
    }); 
</script>

这不是工作这个隐藏它。页面加载正常，但没有加载gif。没有错误。

如果我在浏览器中进行调试，我会看到GIF，因为它一定是加载和隐藏，但不是当我正常加载页面时。我怀疑它装载得太晚或太早隐藏。

只要页面开始加载，我的javascript是否显示加载器？我把它放在身体的一开始。

或者是我在页面完全加载之前隐藏它的事情？无论哪种方式，任何人都可以看到我做错了什么？

UPDATE，并回答

在onload添加到该对象标记，如下所示：

var out = "<object ... onload=\"contentLoaded(this)\"></object>"; 

<script> 
    function contentLoaded() { 
     $(".loader").hide(); 
    }; 
</script>

来源

2016-08-30 RGriffiths

你知道有时候浏览器的行为很奇怪。图像可能会拒绝显示，并且它主要是由于太多的JavaScript代码减慢页面速度而引起的，而这经常发生在Firefox和Opera中。尝试使用其他不同的浏览器 –

感谢 - 它似乎在我使用的所有浏览器中表现相同。 – RGriffiths

那为什么不离开.loader元素空，做这样的事情

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

这

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

来源

2016-08-30 22:09:59

加载gif的触发器是否只显示在加载的页面中？

如果是这样，在浏览器接收到显示加载程序的指令时，它已经提取了数据。

我想象中的大部分时间都花在等待内容，以便尽量只显示在此之前发生的装载机：

document.getElementById('content').innerHTML = objectContent;

你总是可以创建本地化装载机形象，innerHTML的范围内设定，为你说你已经有一个全球性的。

来源

2016-08-30 22:12:40 jedifans

$（“。loader”）。fadeIn（“fast”）;脚本在标记之后是笔直的 - 这与我在这里的完全相同。淡出脚本位于标记之前。所以，当你说'在发生这种情况之前试着展示加载器'这就是我正在努力解决的问题。 document.getElementById（'content'）。innerHTML = objectContent;行在主页 - 不是目标。 – RGriffiths

它需要位于包含/主机页面上，而不是您加载的内容。请检查浏览器的网络选项卡，了解为什么您需要这样做。 – jedifans

这很好，我可以做到这一点，但我怎么知道对象何时完成加载？ – RGriffiths

显示在html对象中加载gif

回答

相关问题