Load HTML into Div on background thread?

Question

I'm loading an external HTML file into a DIV using the following method:

    var docName = name + ".html";
    $("#displayPanel").load(docName);

then I call getScript on the javascript file controlling that HTML file, like so:

    docName = name + ".js";
    $.getScript(docName, function( data, textStatus, jqxhr ) {

        if (textStatus==="success") {
            lightItUp(); //load method
        }
    });

It loads correctly.

The issue is that with large HTML/JS files the DOM is frozen and user interaction is disabled until the load has completed. Is it possible to put the div loading on a 'background thread' and receive a completion notification?

Answer 1

Not sure if I understood your question correctly.

If you want to make it as if the div is loading on a background thread and receive a notif upon completion, you can have the div display:none at first and make it display:block in the callback.

$( "#aDivInDisplayPanel" ).load( docName, function() {
  //load completed.
  $(this).fadeIn();
});

Answer 2

Have you considered using HTML5 Web Workers?

http://www.w3schools.com/html/html5_webworkers.asp

When executing scripts in an HTML page, the page becomes unresponsive until the script is finished.

A web worker is a JavaScript that runs in the background, independently of other scripts, without affecting the performance of the page. You can continue to do whatever you want: clicking, selecting things, etc., while the web worker runs in the background.

Answer 3

Unless you make AJAX synchronous somehow, the code above can't block the UI unless the browser needs a long time to process the HTML (IE 6.6 could take 1-2 minutes to parse HTML loaded this way) or you have something in lightItUp() that takes a long time.

The next step is to fire up your browser's performance tool and check where the time goes. The code that you posted above looks correct and should not cause what you describe.