Display gif loading in html object

Question

I have a homepage with a few buttons. When the button is pressed, the target page is loaded as an object in a div on this main page, where target is the page that will be displayed inside the object.

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

All works and the landing page are loaded within the main page.

Sometimes it may take some time to load the content, so I would use gif loading. I use one on all pages, but I would like only one of the contents in a div.

On the landing page, I have the following to display the bootloader:

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

and this is to hide it after loading the page

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

This does not work. The page loads fine, but without gif loading. No mistakes.

, gif , , , . , .

javascript , ? .

- , , ? , - , ?

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('');

Answer 2

gif ?

, , , .

, , :

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

, innerHTML, , .