Running javascript after page is fully rendered

Question

I am trying to create a syntax highlighter script. I tried using my script on a code with 10 thousand lines and all I see is a blank page while it is loading. Everything wil

Answer 1

Do you mean after all the images have been loaded?

I think window.onload is what you're looking for

window.onload = function() {
    //dom not only ready, but everything is loaded
};

EDIT

Per Chris's comment, here's the jQuery way:

$(window).load(function() {
    //dom not only ready, but everything is loaded
});

Answer 2

Not sure exactly how much data is being brought in...but what if on document ready you ran a jquery ajax call and used the completed method to run your highlighter function? If there is a lot of data it will be a slower page load.

Anyways would like similar to this

$.ajax({
            type: "POST",
            url: "Where data is actually stored",
            data: { ChannelTypeID: ChannelTypeID },
            datatype: "html",
            beforeSend: function () {

            },
            success: function (myHTML) {
                $('body').html(myHTML);
            },
            error: function () {
                alert("Ajax request was unsuccessful");
            },
            complete: function () {
                highlighterFunction();
            }
        });

The complete method specifies a function to be run when an AJAX request completes. Hopefully the success will fire early enough to push the data and allow your highlight to work properly

Answer 3

in case you didn't try this yet, 9 years later …

$(document).ready(function () {
    window.setTimeout('ctlEmployeeEdit.document_load()', 50);
    });

I guess if you set your time out to 9 years of milliseconds, the page will probably have rendered, but that's just my hypothesis!

Answer 4

Problem with window.onload approaches

Even if you use the $(window).load approach, your highlighter stuff could get run prior to something from $(document).ready completing, since there may be lots of asynchronous callback functions all over the place.

My approach

I use a combination of waiting for document.readyState == 'complete and setTimeout. The idea is that I want to wait until the page is fully rendered (hence the 'complete') and then further ensure that the $(document).ready JQuery wrapper content has completed (hence the setTimeout).

Here's how I would solve your problem, assuming that 200 milliseconds is ample time for everything inside $(document).ready(function(){ /*...*/ }); to complete.

function highlighterAction() {
    // actually do the highlighting stuff here
}

function highlighter() {
    /*
      The short pause allows any required callback functions
      to execute before actually highlighting, and allows
      the JQuery $(document).ready wrapper to finish.
     */
    setTimeout(function() {
        highlighterAction();
    }, 200);
}

/*
  Only trigger the highlighter after document fully loaded.  This is
  necessary for cases where page load takes a significant length
  of time to fully load.
*/
if (document.readyState == 'complete') {
    highlighter();
} else {
    document.onreadystatechange = function () {
        if (document.readyState === "complete") {
            highlighter();
        }
    }
}