Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 434
  • Last Modified:

Loading div content with jQuery after rest of page loads

I have an HTML page that includes a portion of code that fetched external data remotely.

eg.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Example</title>
</head>

<body>
<h1>Hello</h1>
	<div id="weatherwidget">
		<!-- Widget Start -->
		<link rel="stylesheet" type="text/css" href="http://www.externalsite.com/style.css" />
		<script type="text/javascript" src="http://www.externalsite.com/javascript.js"></script>
		<div id="ww-widget">
			<p>Widget does stuff here when it finally loads.</p>
		</div>
		<!-- Widget End -->
	</div>
<h2>More text</h2>
</body>
</html>

Open in new window


The problem I am having is this external site is sometimes slow to load, and therefore makes the page loading pause as the external widget loads.

Is there a way in jQuery I can use AJAX to load that div once the rest of the page has loaded?


0
sonic1234
Asked:
sonic1234
  • 2
1 Solution
 
dsmileCommented:
You should modify your html as attached, and create another html with this content and save it with name and path as specified in /path/to/widget/htm

				<link rel="stylesheet" type="text/css" href="http://www.externalsite.com/style.css" />
                <script type="text/javascript" src="http://www.externalsite.com/javascript.js"></script>

Open in new window

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Example</title>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>

<body>

<h1>Hello</h1>
        <div id="weatherwidget">
                <!-- Widget Start -->                
                <div id="ww-widget">
                        <p>Widget does stuff here when it finally loads.</p>
                </div>
                <!-- Widget End -->
        </div>
<h2>More text</h2>
<script language="JavaScript">
<!--
$(document).ready(function () {
  example_ajax_request();
});

	function example_ajax_request() {
  $('#weatherwidget').html('<p><img src="/images/ajax-loader.gif" width="220" height="19" /></p>');
  $('#weatherwidget').load("/path/to/widget/htm");
}

//-->
</script>
 </body>
</html>

Open in new window

0
 
Gurvinder Pal SinghCommented:
you can load the div content at the document.ready event

$(document).ready(function(){
   //load the div now
});
0
 
dsmileCommented:
You can get a bunch  of loading image here http://www.4shared.com/file/219475792/87cd6f0f/loading.html
0
 
sonic1234Author Commented:
Thanks very much dsmile
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now