dynamic loading content containing javascript

I want to add a progress bar before my web page's content loads, so I thought of loading it dynamically via javascript. This content has embedded javascript in its html. I tried using jquery.load() which works perfectly besides the fact that it does not support the js that doesn''t work on the returned content

just to make it clear, what i'm doing is something like this to load all the content:

 $("#contentid").html("progressBar.gif");
 $("#contentid").load(script.php #content)
 $("#contentid").show();

and inside th开发者_运维技巧e content returned from script.php there are js calls such as:

jquery.load (to crawl for data and displaying it when ready)
document.getElementById('some_div') (for chart api)
snippets that load widgets

I've been trying to work around with using jquery.ajax though not sure if\how its possible with it yet. would love for some input on that.should i be able to achieve that with it?

Any other idea that might show a progress bar till the script's content is loaded will be great. I'm trying to reduce changes in the code structure, since this long load happens only sometimes.

Thanks.

You may add a div with the progress bar, covering all the page, and remove it after the page is loaded, using:

$(window).load(function() {
  $('#progressbar').remove();
});

JQuery's load method takes a callback function as an argument. That function will get called when the load is completed, so you can hide your progress bar at that point. Here is an example from their API docs:

$('#result').load('ajax/test.html', function() {
  alert('Load was performed.');
});

In your case, it would be something like:

$("#contentid").load(script.php, function(){
  $("#contentid").hide();
});