Reputation: 5757

JQuery closing dialog on document.ready

<div id="dialog"><img src="images/load.gif"/></div>

I have this gif that plays before document.ready, and i'm trying to close it after the page is ready. I have tried:

<script type="text/javascript">
$("#dialog").dialog('option', 'dialogClass', 'alert'); //show dialog modal while page is loading

$(document).ready(function() { //document is ready, close loading gif
$("#dialog").dialog('destroy');

This code works but it doesn't remove the loading gif, it still shows on the page. I have tried adding $('#dialog').remove() but this seems to 'break' my page by not letting the rest of the page execute.

how can i remove this dialog when the page is ready?

Upvotes: 0

Answers (3)

MatRt

Reputation: 3534

First, It is better to wait for the DOM to be loaded (and so JQuery library) before using jQuery method.

Secondly, unless you are loading content via Ajax, it is a little bit useless to show a dialog waiting box and immediately remove it (The time before the dialog creation and the dialog destruction is extremely short).

Moreover, the dialog function, used with destroy, do not remove the original HTML code. It only remove all modifications made by the dialog plugin during the dialog creation.

So, when you apply the

$("#dialog").dialog('destroy');

You only remove the dialog HTML structure that is wrapped aroud the

<div id="dialog"><img src="images/load.gif"/></div>

But not the DIV it self.

In my point of view, the best way is to add your spinner with classic HTML and CSS, And when the page is loaded and jQuery loaded, wait a bit and then remove it.

You could have this piece of CSS

#dialog
{
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    background-color: grey;
    text-align: center;
    padding-top: 50px;
}

and this piece of Javascript

$(document).ready(function() {

    // Wait a short delay, animate opacity and finally remove
    $("#dialog").delay(300).animate({
        "opacity" : 0
    }, 500, function() {
        $("#dialog").remove();
    });

});

good luck

Upvotes: 0