How to know when an object within a page has completed loading

Question

I have a page where there are buttons that lead to html content being loaded within the host page using an object tag.

Is there a way of the host page knowing when the content has completed loading?

The reason is so that when:

button is clicked a display loading gif across the host page
html is loaded into object
hide the loading gif

The host page loads. Buttons on the host lead to content to being loaded into an 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>

What I trying to figure out is how to know when the content has completed loading into the object.

Possible duplicate of [How do I call a JavaScript function on page load?](http://stackoverflow.com/questions/3842614/how-do-i-call-a-javascript-function-on-page-load) — Geoff James, Aug 31 '16 at 10:44
@GeoffJames I am not sure this is a duplicate. It is not the initial loading of an object - it is loading html content into an object after the host page has already loaded. See uodate. — RGriffiths, Aug 31 '16 at 10:59
Thanks @RGriffiths - now the question's been updated it's become a bit more apparent as to what the OP is asking — Geoff James, Aug 31 '16 at 11:00
@Tushar This is fine for the initial loading of the host page, but I am trying to work out how to know when additional content has completed loading within the page when a button is pressed — RGriffiths, Aug 31 '16 at 11:07

score 0 · Answer 1 · answered Aug 31 '16 at 10:45

0

have you tried using JavaScript to check when the DOM is fully loaded like this:

window.onload = function () { alert("It's loaded!") }

Hope this helps :)

answered Aug 31 '16 at 10:45

blobbymatt

317
1
2
17

This is fine for the initial loading of the host page, but I am trying to work out how to know when additional content has completed loading within the page when a button is pressed. – RGriffiths Aug 31 '16 at 11:02

score 0 · Accepted Answer · answered Aug 31 '16 at 11:30

I have found the answer. Include the onload into the object tag. And then add a function to hide the loader.

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

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

How to know when an object within a page has completed loading

2 Answers2