Question

In my web application I call a document can be huge. This document is loaded into an iframe.

I have a title, buttons and the text which all depends on this document. The text is from the large document and is displayed in the iframe. I’d like to show an animated gif while the document is loading on 3 places (1: document title, 2: document buttons, 3: document text, the iframe)

I’ve tried the onload event on the Iframe, but this doesn’t give the me the desired effect.

Here’s my code that loads the document:

function loadDocument(id, doc) {
    $("#DocumentContent").show();
    $("#ButtonBox").show();

    // Clear dynamic menu items
    $("#DynamicMenuContent").html("");
    $("#PageContent").html("");

    // Load document in frame
    $("#iframeDocument").attr("src", 'ViewDoc.aspx?id=' + id + '&doc=' + doc + '');    

    //    $("#iframeDocument").attr("src", "Graphics/loader.gif");    

    // Load menu items
    $.ajax({
        url: "ShowButtons.aspx?id=" + id + "&doc=" + doc,
        success: function(data) { $("#DynamicMenuContent").html(data) },
        error: function(xhr, err, e) { alert("error: " + err) }
    });    

    // Set document title
    $("#documentTitle").load("GetDocumentInfo.aspx?p=title");
}

My questions, how can I display a loader gif while the document is loaded? And remove the gif when the document is ready?

Answer 1

I’ve created a div with an image and some text. In my function I make this div visible. I’ve also created a javascript function (closeLoading()) which hides this div. In the onload of the iframe I call closeLoading(). I’ve got my inspiration from this site: http://mf.pastebin.com/f3c863aa4