dangerouse/lazy.html

## lazy.html
<!DOCTYPE html>
<html>
<body>

<!--
  This sample page adds a link to launch the cloudsponge widget only if the user clicks.
  This will reduce the load time of your page and is especially useful if the primary
  purpose of the page is not importing address books.
  The page only depends on the Cloudsponge Widget script.
-->

<div>
  <!-- Link to launch the widget -->
  <a href="#" id="import_link" class="cs_import">Add from Address Book</a>
  <!-- Placeholder that displays while the widget resources are loaded -->
  <span id="loading_indicator" style="display:none">Loading importer...</span>
</div>

<!-- This textarea will be populated with the contacts returned by CloudSponge -->
<textarea id="contact_list" style="width:450px;height:82px"></textarea>

<script type="text/javascript">
// Asynchronously include the widget library.
// TODO: replace with your widget script
(function(u){
  var d=document,s='script',a=d.createElement(s),m=d.getElementsByTagName(s)[0];
  a.async=1;a.src=u;m.parentNode.insertBefore(a,m);
})('//api.cloudsponge.com/widget/YOUR_WIDGET_SCRIPT.js');
// set up cloudsponge options
window.csPageOptions = {
  textarea_id:'contact_list', // this is where the contacts will be populated
  afterInit:function() { // called after the cloudsponge widget completes initialization
    document.getElementById('loading_indicator').style.display = 'none'; // hide the loading indicator
    document.getElementById('import_link').style.display = 'block'; // show the launch link
    cloudsponge.launch();
  }
};
// Bootstrap the cloudsponge script only if the link is clicked
// after cloudsponge object initializes, this onclick function is rewritten
document.getElementById('import_link').onclick = function() {
  // create a new script node
  var s = document.createElement('script');
  s.setAttribute('type', 'text/javascript');
  s.setAttribute('src', '//api.cloudsponge.com/address_books.js');
  // find an element on the page and add the new script before it
  var first_script = document.getElementsByTagName('script')[0];
  first_script.parentNode.insertBefore(s, first_script);

  // show the placeholder loading text
  document.getElementById('import_link').style.display = 'none';
  document.getElementById('loading_indicator').style.display = 'block';
};
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<body>

	<!--
	This sample page adds a link to launch the cloudsponge widget only if the user clicks.
	This will reduce the load time of your page and is especially useful if the primary
	purpose of the page is not importing address books.
	The page only depends on the Cloudsponge Widget script.
	-->

	<div>
	<!-- Link to launch the widget -->
	<a href="#" id="import_link" class="cs_import">Add from Address Book</a>
	<!-- Placeholder that displays while the widget resources are loaded -->
	<span id="loading_indicator" style="display:none">Loading importer...</span>
	</div>

	<!-- This textarea will be populated with the contacts returned by CloudSponge -->
	<textarea id="contact_list" style="width:450px;height:82px"></textarea>

	<script type="text/javascript">
	// Asynchronously include the widget library.
	// TODO: replace with your widget script
	(function(u){
	var d=document,s='script',a=d.createElement(s),m=d.getElementsByTagName(s)[0];
	a.async=1;a.src=u;m.parentNode.insertBefore(a,m);
	})('//api.cloudsponge.com/widget/YOUR_WIDGET_SCRIPT.js');
	// set up cloudsponge options
	window.csPageOptions = {
	textarea_id:'contact_list', // this is where the contacts will be populated
	afterInit:function() { // called after the cloudsponge widget completes initialization
	document.getElementById('loading_indicator').style.display = 'none'; // hide the loading indicator
	document.getElementById('import_link').style.display = 'block'; // show the launch link
	cloudsponge.launch();
	}
	};
	// Bootstrap the cloudsponge script only if the link is clicked
	// after cloudsponge object initializes, this onclick function is rewritten
	document.getElementById('import_link').onclick = function() {
	// create a new script node
	var s = document.createElement('script');
	s.setAttribute('type', 'text/javascript');
	s.setAttribute('src', '//api.cloudsponge.com/address_books.js');
	// find an element on the page and add the new script before it
	var first_script = document.getElementsByTagName('script')[0];
	first_script.parentNode.insertBefore(s, first_script);

	// show the placeholder loading text
	document.getElementById('import_link').style.display = 'none';
	document.getElementById('loading_indicator').style.display = 'block';
	};
	</script>
	</body>
	</html>